<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Box Alignment Module Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module contains the features of <a href=&quot;https://www.w3.org/TR/CSS/&quot;>CSS</a> relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. (The alignment of text and inline-level content is defined in [[CSS-TEXT-3]] and [[CSS-INLINE-3]].)" name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-align-3/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!css-align-3_dev/css-align-3" type="text/javascript"></script>
<style>
.issue th:first-child { text-align: left !important; }
[rowspan] > img { float: right; }
[rowspan] { vertical-align: middle; }
table small { display: block; }

table.align-details { width: 100%; }
.align-details th {
	font: inherit;
	font-style: italic;
	white-space: nowrap; width: 1em;
	vertical-align: baseline; }
.align-details td { vertical-align: baseline; }
</style>
<style>
			.cross-auto-figure > div {
				margin: 0 auto;
				width: 70px;
				background: #888;
				padding: 0 .5em;
				border-radius: 1em;
				border: 1px solid transparent;
			}
			.cross-auto-figure > div > div {
				border-spacing: 0;
				display: table;
				background: #ddd;
				color: black;
				text-align: center;
				margin: .5em auto;
				padding: .5em;
				border-radius: .5em;
			}
			</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Box Alignment Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-align/">https://drafts.csswg.org/css-align/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2018/WD-css-align-3-20180830/" rel="prev">https://www.w3.org/TR/2018/WD-css-align-3-20180830/</a>
      <dd><a href="https://www.w3.org/TR/2018/WD-css-align-3-20180423/" rel="prev">https://www.w3.org/TR/2018/WD-css-align-3-20180423/</a>
      <dd><a href="https://www.w3.org/TR/2017/WD-css-align-3-20170906/" rel="prev">https://www.w3.org/TR/2017/WD-css-align-3-20170906/</a>
      <dd><a href="https://www.w3.org/TR/2017/WD-css-align-3-20170720/" rel="prev">https://www.w3.org/TR/2017/WD-css-align-3-20170720/</a>
      <dd><a href="https://www.w3.org/TR/2017/WD-css-align-3-20170515/" rel="prev">https://www.w3.org/TR/2017/WD-css-align-3-20170515/</a>
      <dd><a href="https://www.w3.org/TR/2017/WD-css-align-3-20170407/" rel="prev">https://www.w3.org/TR/2017/WD-css-align-3-20170407/</a>
      <dd><a href="https://www.w3.org/TR/2017/WD-css-align-3-20170215/" rel="prev">https://www.w3.org/TR/2017/WD-css-align-3-20170215/</a>
      <dd><a href="https://www.w3.org/TR/2016/WD-css-align-3-20160614/" rel="prev">https://www.w3.org/TR/2016/WD-css-align-3-20160614/</a>
      <dd><a href="https://www.w3.org/TR/2016/WD-css-align-3-20160519/" rel="prev">https://www.w3.org/TR/2016/WD-css-align-3-20160519/</a>
      <dd><a href="https://www.w3.org/TR/2014/WD-css-align-3-20141218/" rel="prev">https://www.w3.org/TR/2014/WD-css-align-3-20141218/</a>
      <dd><a href="https://www.w3.org/TR/2013/WD-css3-align-20130514/" rel="prev">https://www.w3.org/TR/2013/WD-css3-align-20130514/</a>
      <dd><a href="https://www.w3.org/TR/2012/WD-css3-align-20120612/" rel="prev">https://www.w3.org/TR/2012/WD-css3-align-20120612/</a>
      <dt>Test Suite:
      <dd><a href="http://test.csswg.org/suites/css-align-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-align-3_dev/nightly-unstable/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-align-3/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-align-3">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module contains the features of <a href="https://www.w3.org/TR/CSS/">CSS</a> relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. (The alignment of text and inline-level content is defined in <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a> and <a data-link-type="biblio" href="#biblio-css-inline-3">[CSS-INLINE-3]</a>.)</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-align” in the title,
	preferably like this:
	“[css-align] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk">
   <p>The following features are at-risk, and may be dropped during the CR period: </p>
   <ul>
    <li><span class="css">[ first | last ]? baseline</span>
    <li>the <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position" title="Expands to: safe | unsafe">&lt;overflow-position></a> keywords
    <li>the scrollable-area safety trigger into <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe">safe</a> mode when no <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position①" title="Expands to: safe | unsafe">&lt;overflow-position></a> is specified
    <li>the <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy">legacy</a> keyword for <a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items">justify-items</a>
    <li>the effect of the <a data-link-type="dfn" href="#box-alignment-properties" id="ref-for-box-alignment-properties">box alignment properties</a> on absolutely-positioned boxes with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto">auto</a> offsets
   </ul>
   <p>“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.</p>
  </div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
     <ol class="toc">
      <li><a href="#placement"><span class="secno">1.1</span> <span class="content"> Module interactions</span></a>
      <li><a href="#values"><span class="secno">1.2</span> <span class="content"> Values</span></a>
      <li><a href="#partial"><span class="secno">1.3</span> <span class="content"> Partial Implementations</span></a>
     </ol>
    <li><a href="#overview"><span class="secno">2</span> <span class="content"> Overview of Alignment Properties</span></a>
    <li><a href="#terms"><span class="secno">3</span> <span class="content"> Alignment Terminology</span></a>
    <li>
     <a href="#alignment-values"><span class="secno">4</span> <span class="content"> Alignment Keywords</span></a>
     <ol class="toc">
      <li><a href="#positional-values"><span class="secno">4.1</span> <span class="content"> Positional Alignment: the <span class="css">center</span>, <span class="css">start</span>, <span class="css">end</span>, <span class="css">self-start</span>, <span class="css">self-end</span>, <span class="css">flex-start</span>, <span class="css">flex-end</span>, <span class="css">left</span>, and <span class="css">right</span> keywords</span></a>
      <li><a href="#baseline-values"><span class="secno">4.2</span> <span class="content"> Baseline Alignment: the <span class="css">baseline</span> keyword and <span class="css">first</span>/<span class="css">last</span> modifiers</span></a>
      <li><a href="#distribution-values"><span class="secno">4.3</span> <span class="content"> Distributed Alignment: the <span class="css">stretch</span>, <span class="css">space-between</span>, <span class="css">space-around</span>, and <span class="css">space-evenly</span> keywords</span></a>
      <li><a href="#overflow-values"><span class="secno">4.4</span> <span class="content"> Overflow Alignment: the <span class="css">safe</span> and <span class="css">unsafe</span> keywords and scroll safety limits</span></a>
     </ol>
    <li>
     <a href="#content-distribution"><span class="secno">5</span> <span class="content"> Content Distribution: Aligning a Box’s Contents Within Itself</span></a>
     <ol class="toc">
      <li>
       <a href="#align-justify-content"><span class="secno">5.1</span> <span class="content"> The <span class="property">justify-content</span> and <span class="property">align-content</span> Properties</span></a>
       <ol class="toc">
        <li><a href="#distribution-block"><span class="secno">5.1.1</span> <span class="content">Block Containers (Including Table Cells)</span></a>
        <li><a href="#distribution-multicol"><span class="secno">5.1.2</span> <span class="content">Multicol Containers</span></a>
        <li><a href="#distribution-flex"><span class="secno">5.1.3</span> <span class="content">Flex Containers</span></a>
        <li><a href="#distribution-grid"><span class="secno">5.1.4</span> <span class="content">Grid Containers</span></a>
       </ol>
      <li><a href="#place-content"><span class="secno">5.2</span> <span class="content"> Content-Distribution Shorthand: the <span class="property">place-content</span> property</span></a>
      <li><a href="#overflow-scroll-position"><span class="secno">5.3</span> <span class="content"> Overflow and Scroll Positions</span></a>
      <li><a href="#baseline-align-content"><span class="secno">5.4</span> <span class="content"> Baseline Content-Alignment</span></a>
     </ol>
    <li>
     <a href="#self-alignment"><span class="secno">6</span> <span class="content"> Self-Alignment: Aligning the Box Within Its Parent</span></a>
     <ol class="toc">
      <li>
       <a href="#justify-self-property"><span class="secno">6.1</span> <span class="content"> Inline-Axis (or Main-Axis) Alignment: the <span class="property">justify-self</span> property</span></a>
       <ol class="toc">
        <li><a href="#justify-block"><span class="secno">6.1.1</span> <span class="content">Block-Level Boxes</span></a>
        <li><a href="#justify-abspos"><span class="secno">6.1.2</span> <span class="content">Absolutely-Positioned Boxes</span></a>
        <li><a href="#justify-cell"><span class="secno">6.1.3</span> <span class="content">Table Cells</span></a>
        <li><a href="#justify-flex"><span class="secno">6.1.4</span> <span class="content">Flex Items</span></a>
        <li><a href="#justify-grid"><span class="secno">6.1.5</span> <span class="content">Grid Items</span></a>
       </ol>
      <li>
       <a href="#align-self-property"><span class="secno">6.2</span> <span class="content"> Block-Axis (or Cross-Axis) Alignment: the <span class="property">align-self</span> property</span></a>
       <ol class="toc">
        <li><a href="#align-block"><span class="secno">6.2.1</span> <span class="content">Block-Level Boxes</span></a>
        <li><a href="#align-abspos"><span class="secno">6.2.2</span> <span class="content">Absolutely-Positioned Boxes</span></a>
        <li><a href="#align-cell"><span class="secno">6.2.3</span> <span class="content">Table Cells</span></a>
        <li><a href="#align-flex"><span class="secno">6.2.4</span> <span class="content">Flex Items</span></a>
        <li><a href="#align-grid"><span class="secno">6.2.5</span> <span class="content">Grid Items</span></a>
       </ol>
      <li><a href="#place-self-property"><span class="secno">6.3</span> <span class="content"> Self-Alignment Shorthand: the <span class="property">place-self</span> property</span></a>
      <li><a href="#baseline-align-self"><span class="secno">6.4</span> <span class="content"> Baseline Self-Alignment</span></a>
      <li><a href="#abspos-sizing"><span class="secno">6.5</span> <span class="content"> Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</span></a>
     </ol>
    <li>
     <a href="#default-alignment"><span class="secno">7</span> <span class="content"> Default Alignment</span></a>
     <ol class="toc">
      <li><a href="#justify-items-property"><span class="secno">7.1</span> <span class="content"> Inline-Axis (or Main-Axis) Alignment: the <span class="property">justify-items</span> property</span></a>
      <li><a href="#align-items-property"><span class="secno">7.2</span> <span class="content"> Block-Axis (or Cross-Axis) Alignment: the <span class="property">align-items</span> property</span></a>
      <li><a href="#place-items-property"><span class="secno">7.3</span> <span class="content"> Self-Alignment Shorthand: the <span class="property">place-items</span> property</span></a>
     </ol>
    <li>
     <a href="#gaps"><span class="secno">8</span> <span class="content"> Gaps Between Boxes</span></a>
     <ol class="toc">
      <li><a href="#column-row-gap"><span class="secno">8.1</span> <span class="content"> Row and Column Gutters: the <span class="property">row-gap</span> and <span class="property">column-gap</span> properties</span></a>
      <li><a href="#gap-shorthand"><span class="secno">8.2</span> <span class="content"> Gap Shorthand: the <span class="property">gap</span> property</span></a>
      <li><a href="#gap-legacy"><span class="secno">8.3</span> <span class="content"> Legacy Gap Properties: the <span class="property">grid-row-gap</span>, <span class="property">grid-column-gap</span>, and <span class="property">grid-gap</span> properties</span></a>
     </ol>
    <li>
     <a href="#baseline-rules"><span class="secno">9</span> <span class="content"> Baseline Alignment Details</span></a>
     <ol class="toc">
      <li><a href="#baseline-export"><span class="secno">9.1</span> <span class="content"> Determining the Baselines of a Box</span></a>
      <li><a href="#baseline-terms"><span class="secno">9.2</span> <span class="content"> Baseline Alignment Grouping</span></a>
      <li><a href="#align-by-baseline"><span class="secno">9.3</span> <span class="content"> Aligning Boxes by Baseline</span></a>
     </ol>
    <li><a href="#staticpos-rect"><span class="secno">10</span> <span class="content"> Appendix A: Static Position Terminology</span></a>
    <li><a href="#changes"><span class="secno">11</span> <span class="content"> Changes</span></a>
    <li><a href="#privacy-security"><span class="secno">12</span> <span class="content"> Privacy and Security Considerations</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>CSS Levels 1 and 2 allowed for the alignment of text via <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> and the alignment of blocks by balancing <span class="css">auto</span> margins.
	However, except in table cells,
	vertical alignment was not possible.
	As CSS adds further capabilities,
	the ability to align boxes in various dimensions becomes more critical.
	This module attempts to create a cohesive and common box alignment model to share among all of CSS.</p>
   <p class="note" role="note"><span>Note:</span> The alignment of text and inline-level content is defined in <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a> and <a data-link-type="biblio" href="#biblio-css-inline-3">[CSS-INLINE-3]</a>.</p>
   <p class="note" role="note"><span>Note:</span> This specification is not intended to change any of the behavior
	defined in <a href="https://www.w3.org/TR/CSS2/">CSS2.1</a> when the properties defined here are set to their initial values.
	If implementors or anyone else notices a discrepancy,
	please report this to the CSSWG as an error.</p>
   <p><em>This section (above) is not normative.</em></p>
   <h3 class="heading settled" data-level="1.1" id="placement"><span class="secno">1.1. </span><span class="content"> Module interactions</span><a class="self-link" href="#placement"></a></h3>
   <p>This module adds some new alignment capabilities
	to the block layout model described in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> <a href="https://www.w3.org/TR/CSS2/visuren.html">chapters 9</a> and <a href="https://www.w3.org/TR/CSS2/visudet.html">10</a> and defines the interaction of these properties
	with the alignment of table cell content using <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a>,
	as defined in <span>[CSS2]</span> <a href="https://www.w3.org/TR/CSS2/tables.html#height-layout">chapter 17</a>.</p>
   <p>The interaction of these properties with
	Grid Layout <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a> and Flexible Box Layout <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a> is defined in their respective modules.
	The property definitions here supersede those in <span>[CSS-FLEXBOX-1]</span> (which have a smaller, earlier subset of permissible values).</p>
   <p>No properties in this module apply to the <code>::first-line</code> or <code>::first-letter</code> pseudo-elements.</p>
   <h3 class="heading settled" data-level="1.2" id="values"><span class="secno">1.2. </span><span class="content"> Values</span><a class="self-link" href="#values"></a></h3>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>.
	Value types not defined in this specification are defined in CSS Values &amp; Units <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>.
	Other CSS modules may expand the definitions of these value types.</p>
   <p>In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> keywords as their property value.
	For readability they have not been repeated explicitly.</p>
   <h3 class="heading settled" data-level="1.3" id="partial"><span class="secno">1.3. </span><span class="content"> Partial Implementations</span><a class="self-link" href="#partial"></a></h3>
   <p>Since it is expected that support for the features in this module
	will be deployed in stages corresponding to the various layout models affected,
	it is hereby clarified that
	the <a href="https://www.w3.org/TR/CSS/#partial">rules for partial implementations</a> that require treating as invalid any unsupported feature
	apply to any alignment keyword
	which is not supported across all layout modules to which it applies
	for layout models in which the implementation supports the property in general.</p>
   <p>For example,
	if an implementation supports <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self">align-self</a> in <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a> and <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a>,
	then it must treat <span class="css">start</span> as invalid
	unless it is supported in both grid and flex containers.
	However if that same implementation does not support <span class="property" id="ref-for-propdef-align-self①">align-self</span> for block-level elements at all,
	then a lack of implementation of <span class="css" id="ref-for-propdef-align-self②">align-self: start</span> does not trigger this requirement to treat it as invalid.</p>
   <h2 class="heading settled" data-level="2" id="overview"><span class="secno">2. </span><span class="content"> Overview of Alignment Properties</span><a class="self-link" href="#overview"></a></h2>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="box-alignment-properties">box alignment properties</dfn> in CSS are a set of 6 properties
	that control alignment of boxes within other boxes.
	They can be described along two axises:</p>
   <ul>
    <li>which dimension they apply to (<a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis">main</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline</a> vs. <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis">cross</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block</a>), and 
    <li>whether they control the position of the box within its parent, or the box’s content within itself. 
   </ul>
   <p class="note" role="note"><span>Note:</span> This specification uses the terms “justify” and “align” to distinguish
	between alignment in the main/inline and cross/block dimensions, respectively.
	The choice is somewhat arbitrary, but having the two terms allows for
	a consistent naming scheme that works across all of CSS’s layout models
	(including <a href="https://www.w3.org/TR/css-flexbox-1/#box-model">CSS Flexbox 1 §2 Flex Layout Box Model and Terminology</a>)</p>
   <p>The following table summarizes the <a data-link-type="dfn" href="#box-alignment-properties" id="ref-for-box-alignment-properties①">box alignment properties</a> and the display types they can apply to.</p>
   <table class="data">
    <colgroup span="1">
    <colgroup span="2">
    <colgroup span="1">
    <thead>
     <tr>
      <th>Common 
      <th>Axis 
      <th>Aligns 
      <th>Applies to 
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content">justify-content</a> 
      <td>main/inline 
      <td rowspan="2"> <img alt height="106" src="images/content-example.svg" width="106"> content within element <small>(effectively adjusts padding)</small> 
      <td rowspan="2"><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container">block containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container">grid containers</a> 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content">align-content</a> 
      <td>cross/block 
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self">justify-self</a> 
      <td>inline 
      <td rowspan="2"> <img alt height="106" src="images/self-example.svg" width="106"> element within parent <small>(effectively adjusts margins)</small> 
      <td>block-level boxes, absolutely-positioned boxes, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item">grid items</a> 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self③">align-self</a> 
      <td>cross/block 
      <td>absolutely-positioned boxes, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item">flex items</a>, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item①">grid items</a> 
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items①">justify-items</a> 
      <td>inline 
      <td rowspan="2"> <img alt height="106" src="images/items-example.svg" width="106"> items inside box <small>(controls child items’ <span class="css">justify-self: auto</span>)</small> 
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container①">block containers</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container①">grid containers</a> 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-items" id="ref-for-propdef-align-items">align-items</a> 
      <td>cross/block 
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①">flex containers</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container②">grid containers</a> 
   </table>
   <p class="note" role="note"><span>Note:</span> The <a class="property" data-link-type="propdesc">*-items</a> properties don’t affect the element itself.
	When set on a container,
	they specify the interpretation of any <span class="css">*-self: auto</span> used on children of the container element.</p>
   <h2 class="heading settled" data-level="3" id="terms"><span class="secno">3. </span><span class="content"> Alignment Terminology</span><a class="self-link" href="#terms"></a></h2>
   <p>Since this module defines alignment properties for all layout modes in CSS,
	some abstract terminology is introduced:</p>
   <dl>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="alignment-subject">alignment subject</dfn> 
    <dd> The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject">alignment subject</a> is the thing or things being aligned by the property.
			For <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①">justify-self</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self④">align-self</a>,
			the <span id="ref-for-alignment-subject①">alignment subject</span> is the margin box of the box the property is set on,
			and assumes the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a> of that box.
			For <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①">justify-content</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①">align-content</a>,
			the <span id="ref-for-alignment-subject②">alignment subject</span> is defined by the layout mode
			and refers to some aspect of its contents;
			it also assumes the <span id="ref-for-writing-mode①">writing mode</span> of the box the property is set on. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="alignment-container">alignment container</dfn> 
    <dd> The <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container">alignment container</a> is the rectangle that the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject③">alignment subject</a> is aligned within.
			This is defined by the layout mode,
			but is usually the <span id="ref-for-alignment-subject④">alignment subject</span>’s containing block,
			and assumes the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②">writing mode</a> of the box establishing the containing block. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="fallback-alignment">fallback alignment</dfn> 
    <dd> Some alignments can only be fulfilled in certain situations
			or are limited in how much space they can consume;
			for example, <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between">space-between</a> can only operate when there is more than one <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤">alignment subject</a>,
			and baseline alignment, once fulfilled, might not be enough to absorb all the excess space.
			In these cases a fallback alignment takes effect
			(as defined below)
			to fully consume the excess space. 
   </dl>
   <h2 class="heading settled" data-level="4" id="alignment-values"><span class="secno">4. </span><span class="content"> Alignment Keywords</span><a class="self-link" href="#alignment-values"></a></h2>
   <p>All of the alignment properties use a common set of keyword values,
	which are defined in this section.
	Keywords fall into three categories:</p>
   <dl>
    <dt><a href="#positional-values">positional alignment</a> 
    <dd>These keywords define alignment as an absolute position within the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①">alignment container</a>. 
    <dt><a href="#baseline-values">baseline alignment</a> 
    <dd>These keywords define alignment as a relationship
			among the baselines of multiple <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥">alignment subjects</a> within an <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context">alignment context</a>. 
    <dt><a href="#distribution-values">distributed alignment</a> 
    <dd>These keywords define alignment as a distribution of space among <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦">alignment subjects</a>. 
   </dl>
   <h3 class="heading settled" data-level="4.1" id="positional-values"><span class="secno">4.1. </span><span class="content"> Positional Alignment: the <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center">center</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start">start</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end">end</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start">self-start</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-self-end" id="ref-for-valdef-self-position-self-end">self-end</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start">flex-start</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-end" id="ref-for-valdef-self-position-flex-end">flex-end</a>, <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left">left</a>, and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right">right</a> keywords</span><a class="self-link" href="#positional-values"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="positional-alignment">positional alignment</dfn> keywords specify a position for an <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑧">alignment subject</a> with respect to its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②">alignment container</a>.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>" data-dfn-type="value" data-export id="valdef-self-position-center">center</dfn> <small>(<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>)</small> 
    <dd>Centers the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑨">alignment subject</a> within its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③">alignment container</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>" data-dfn-type="value" data-export id="valdef-self-position-start">start</dfn> <small>(<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>)</small> 
    <dd>Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⓪">alignment subject</a> to be flush with the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④">alignment container</a>’s start edge in the appropriate axis. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>" data-dfn-type="value" data-export id="valdef-self-position-end">end</dfn> <small>(<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>)</small> 
    <dd>Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①①">alignment subject</a> to be flush with the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑤">alignment container</a>’s end edge in the appropriate axis. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>" data-dfn-type="value" data-export id="valdef-self-position-self-start">self-start</dfn> <small>(<a href="#self-alignment">self</a>)</small> 
    <dd>Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①②">alignment subject</a> to be flush with the edge of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑥">alignment container</a> corresponding to the <span id="ref-for-alignment-subject①③">alignment subject</span>’s start side in the appropriate axis. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>" data-dfn-type="value" data-export id="valdef-self-position-self-end">self-end</dfn> <small>(<a href="#self-alignment">self</a>)</small> 
    <dd>Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①④">alignment subject</a> to be flush with the edge of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑦">alignment container</a> corresponding to the <span id="ref-for-alignment-subject①⑤">alignment subject</span>’s end side in the appropriate axis. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>" data-dfn-type="value" data-export id="valdef-self-position-flex-start">flex-start</dfn> <small>(<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>)</small> 
    <dd>
     <strong>Only used in flex layout.</strong> <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a> Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⑥">alignment subject</a> to be flush with the edge of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑧">alignment container</a> corresponding to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container②">flex container</a>’s main-start or cross-start side, as appropriate. 
     <p>When used outside of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context" id="ref-for-flex-formatting-context">flex formatting context</a>, this value behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①">start</a>.
			That is, on boxes that are not <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item①">flex items</a> (or pretending to be <span id="ref-for-flex-item②">flex items</span>,
			such as when determining the static position of an absolutely-positioned box
			that is a child of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container③">flex container</a>),
			this value behaves as <span class="css" id="ref-for-valdef-self-position-start②">start</span> when used in the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties">self-alignment properties</a>,
			and on boxes that are not <span id="ref-for-flex-container④">flex containers</span>,
			this value behaves as <span class="css" id="ref-for-valdef-self-position-start③">start</span> when used in the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties">content-distribution properties</a>.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<self-position>, <content-position>" data-dfn-type="value" data-export id="valdef-self-position-flex-end">flex-end</dfn> <small>(<a href="#self-alignment">self</a>, <a href="#content-distribution">content</a>)</small> 
    <dd>
     <strong>Only used in flex layout.</strong> Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⑦">alignment subject</a> to be flush with the edge of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container⑨">alignment container</a> corresponding to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑤">flex container</a>’s main-end or cross-end side, as appropriate. 
     <p>When used outside of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context" id="ref-for-flex-formatting-context①">flex formatting context</a>, this value behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①">end</a>.
			That is, on boxes that are not <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item③">flex items</a> (or pretending to be <span id="ref-for-flex-item④">flex items</span>,
			such as when determining the static position of an absolutely-positioned box
			that is a child of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑥">flex container</a>),
			this value behaves as <span class="css" id="ref-for-valdef-self-position-end②">end</span> when used in the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties①">self-alignment properties</a>,
			and on boxes that are not <span id="ref-for-flex-container⑦">flex containers</span>,
			this value behaves as <span class="css" id="ref-for-valdef-self-position-end③">end</span> when used in the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties①">content-distribution properties</a>.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content, justify-self, justify-items" data-dfn-type="value" data-export id="valdef-justify-content-left">left</dfn> <small>(only <a class="property" data-link-type="propdesc">justify-*</a>)</small> 
    <dd>
     Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⑧">alignment subject</a> to be flush with
			the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①⓪">alignment container</a>’s <a href="https://www.w3.org/TR/css3-writing-modes/#line-left">line-left</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical-left" id="ref-for-physical-left">physical left</a> edge,
			whichever is in the appropriate axis. 
     <p>If the property’s axis is not parallel with either left↔right axis,
			this value behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start④">start</a>. <span class="note">Currently, the only case where the property’s axis
			is not parallel with either left↔right axis
			is in a column flexbox.</span></p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="justify-content, justify-self, justify-items" data-dfn-type="value" data-export id="valdef-justify-content-right">right</dfn> <small>(only <a class="property" data-link-type="propdesc">justify-*</a>)</small> 
    <dd>
     Aligns the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject①⑨">alignment subject</a> to be flush with
			the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①①">alignment container</a>’s <a href="https://www.w3.org/TR/css3-writing-modes/#line-right">line-right</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical-right" id="ref-for-physical-right">physical right</a> edge,
			whichever is in the appropriate axis. 
     <p>If the property’s axis is not parallel with either left↔right axis,
			this value behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑤">start</a>. <span class="note">Currently, the only case where the property’s axis
			is not parallel with either left↔right axis
			is in a column flexbox.</span></p>
   </dl>
   <p>Two grammar terms are used to denote certain subsets of these values:</p>
   <dl>
    <dt><a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position" title="Expands to: end | center | flex-start | start | self-end | flex-end | self-start">&lt;self-position></a> 
    <dd>
      This set is used by <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self②">justify-self</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self⑤">align-self</a> to align the box within its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①②">alignment container</a>,
			and also by <a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items②">justify-items</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-items" id="ref-for-propdef-align-items①">align-items</a> (to specify default values for <span class="property" id="ref-for-propdef-justify-self③">justify-self</span> and <span class="property" id="ref-for-propdef-align-self⑥">align-self</span>). 
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-self-position">&lt;self-position></dfn> = center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> self-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> self-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a>
        flex-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> flex-end
</pre>
    <dt><a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position" title="Expands to: flex-start | flex-end | end | center | start">&lt;content-position></a> 
    <dd>
      This set is used by <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content②">justify-content</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content②">align-content</a> to align the box’s contents within itself. 
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-content-position">&lt;content-position></dfn> = center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> flex-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> flex-end
</pre>
   </dl>
   <p class="note" role="note"><span>Note:</span> <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left①">left</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right①">right</a> are excluded from <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position①" title="Expands to: end | center | flex-start | start | self-end | flex-end | self-start">&lt;self-position></a> and <a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position①" title="Expands to: flex-start | flex-end | end | center | start">&lt;content-position></a>,
	despite being valid <a data-link-type="dfn" href="#positional-alignment" id="ref-for-positional-alignment">positional alignment</a> values for <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content③">justify-content</a>/<a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self④">justify-self</a>/<a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items③">justify-items</a>,
	because they are not allowed in the <a class="property" data-link-type="propdesc">align-*</a> properties.
	They are instead explicitly included in the <span class="property">justify-*</span> properties’ grammars.</p>
   <aside class="example" id="example-862b737b">
    <a class="self-link" href="#example-862b737b"></a> The <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑥">start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end④">end</a> keywords
		are <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative">flow-relative</a>:
		they use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode③">writing mode</a> to determine which side to align to. 
    <figure>
      <img alt="Inline-axis &apos;start&apos; alignment:
			     Horizontal Latin and Chinese are left-aligned,
			     while Arabic and Hebrew are right-aligned." src="images/start-inline-tb.svg" style="background: white; padding: 8px;" title="inline-axis &apos;start&apos; alignment in various writing systems"> <img alt="Inline-axis &apos;end&apos; alignment:
			     Horizontal Latin and Chinese are right-aligned,
			     while Arabic and Hebrew are left-aligned." src="images/end-inline-tb.svg" style="background: white; padding: 8px;" title="inline-axis &apos;end&apos; alignment in various writing systems"> 
     <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑦">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end⑤">end</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①">inline axis</a> (<a href="#flexbox-exception">typically<sup>†</sup></a> <a class="property" data-link-type="propdesc">justify-*</a>) </figcaption>
    </figure>
    <p>The <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left②">left</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right②">right</a> keywords
		are absolute (not <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①">flow-relative</a>).</p>
    <figure>
      <img alt="Inline-axis &apos;left&apos; alignment:
			     Horizontal text is left-aligned, regardless of writing system." src="images/left-inline-tb.svg" style="background: white; padding: 8px;" title="&apos;left&apos; alignment in various writing systems"> <img alt="Inline-axis &apos;right&apos; alignment:
			     Horizontal text is right-aligned, regardless of writing system." src="images/right-inline-tb.svg" style="background: white; padding: 8px;" title="&apos;right&apos; alignment in various writing systems"> 
     <figcaption> <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left③">left</a> vs <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right③">right</a> </figcaption>
    </figure>
    <p>The <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start⑧">start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end⑥">end</a> keywords
		have meaning in both the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis②">inline</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①">block</a> axes: <span class="css" id="ref-for-valdef-self-position-start⑨">start</span> always orients to the start of the text
		(top left for left-to-right/top-to-bottom languages like English)
		while <span class="css" id="ref-for-valdef-self-position-end⑦">end</span> always orients to the end of the text.</p>
    <figure>
      <img alt="Block-axis &apos;start&apos; alignment:
			     Horizontal text is top-aligned in the vertical axis." src="images/start-block-tb.svg" style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);" title="block-axis &apos;start&apos; alignment in various writing systems"> <img alt="Block-axis &apos;bottom&apos; alignment:
			     Horizontal text is bottom-aligned in the vertical axis." src="images/end-block-tb.svg" style="background: white; padding: 8px; padding-top: calc(8px + 23px);" title="block-axis &apos;end&apos; alignment in various writing systems"> 
     <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⓪">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end⑧">end</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis②">block axis</a> (<a href="#flexbox-exception">typically<sup>†</sup></a> <a class="property" data-link-type="propdesc">align-*</a>) </figcaption>
    </figure>
    <p>The <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①①">start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end⑨">end</a> keywords
		use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode④">writing mode</a> of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①③">alignment container</a>,
		to help keep things consistent.
		But if alignment using the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②⓪">alignment subject</a>’s <span id="ref-for-writing-mode⑤">writing mode</span> is needed,
		the <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start①">self-start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-self-end" id="ref-for-valdef-self-position-self-end①">self-end</a> keywords can be used.</p>
    <figure>
      <img alt="Inline-axis &apos;start&apos; alignment in an LTR container:
			     Alignment uses the context’s start direction, so
			     the (RTL) Arabic and Hebrew items
			     are left-aligned alongside the (LTR) Latin and Chinese." src="images/self-v-context-start-tb.svg" style="background: white; padding: 8px;" title="inline-axis &apos;start&apos; alignment with LTR context"> <img alt="Inline-axis &apos;self-start&apos; alignment in an LTR container:
			     Horizontal Latin and Chinese items are right-aligned,
			     while Arabic and Hebrew items are left-aligned." src="images/self-v-context-self-start-tb.svg" style="background: white; padding: 8px;" title="inline-axis &apos;self-start&apos; alignment with LTR context"> 
     <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①②">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start②">self-start</a> on the individual items </figcaption>
    </figure>
   </aside>
   <aside class="example" id="example-472854ee">
    <a class="self-link" href="#example-472854ee"></a> The behavior of the alignment keywords is analogous in <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode">vertical writing modes</a>: <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①③">start</a> and <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①⓪">end</a> are relative to the start/end of the text in the relevant axis.
		The <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left④">left</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right④">right</a> keywords
		are interpreted as <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-left" id="ref-for-line-left">line-left</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-right" id="ref-for-line-right">line-right</a>,
		relative to the “left” and “right” sides of LTR/RTL text. 
    <figure>
      <img alt="Inline-axis &apos;start&apos; alignment in vertical-rl writing:
			     Vertical Latin and Chinese are top-aligned,
			     while Arabic and Hebrew are bottom-aligned." src="images/start-inline-rl.svg" style="background: white; padding: 8px;" title="inline-axis &apos;start&apos; alignment in various writing systems"> <img alt="Inline-axis &apos;end&apos; alignment in vertical-rl writing:
			     Vertical Latin and Chinese are top-aligned,
			     while Arabic and Hebrew are bottom-aligned." src="images/end-inline-rl.svg" style="background: white; padding: 8px;" title="inline-axis &apos;end&apos; alignment in various writing systems"> 
     <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①④">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①①">end</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis③">inline axis</a> (<a href="#flexbox-exception">typically<sup>†</sup></a> <a class="property" data-link-type="propdesc">justify-*</a>) </figcaption>
    </figure>
    <figure>
      <img alt="Inline-axis &apos;left&apos; alignment in vertical-rl writing:
			     Vertical text is top-aligned, regardless of writing system." src="images/left-inline-rl.svg" style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);" title="&apos;left&apos; alignment in various writing systems"> <img alt="Inline-axis &apos;right&apos; alignment in vertical-rl writing:
			     Vertical text is bottom-aligned, regardless of writing system." src="images/right-inline-rl.svg" style="background: white; padding: 8px; padding-top: calc(5px + 23px); padding-bottom: 5px;" title="&apos;right&apos; alignment in various writing systems"> 
     <figcaption> <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left⑤">left</a> vs <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right⑤">right</a> </figcaption>
    </figure>
    <figure>
      <img alt="Block-axis &apos;start&apos; alignment in vertical-rl writing:
			     Vertical text is top-aligned in the vertical axis." src="images/start-block-rl.svg" style="background: white; padding: 8px;" title="block-axis &apos;start&apos; alignment in various writing systems"> <img alt="Block-axis &apos;bottom&apos; alignment in vertical-rl writing:
			     Vertical text is bottom-aligned in the vertical axis." src="images/end-block-rl.svg" style="background: white; padding: 8px;" title="block-axis &apos;end&apos; alignment in various writing systems"> 
     <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑤">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①②">end</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis③">block axis</a> (<a href="#flexbox-exception">typically<sup>†</sup></a> <a class="property" data-link-type="propdesc">align-*</a>) </figcaption>
    </figure>
    <figure>
      <img alt="Inline-axis &apos;start&apos; alignment in a vertical-rl LTR container:
			     Alignment uses the context’s start direction, so
			     the (RTL) Arabic and Hebrew items
			     are top-aligned alongside the (LTR) Latin and Chinese." src="images/self-v-context-start-rl.svg" style="background: white; padding: 8px; padding-bottom: calc(8px + 30px);" title="inline-axis &apos;start&apos; alignment with LTR context"> <img alt="Inline-axis &apos;self-start&apos; alignment in a vertical-rl LTR container:
			     Horizontal Latin and Chinese items are top-aligned,
			     while Arabic and Hebrew items are bottom-aligned." src="images/self-v-context-self-start-rl.svg" style="background: white; padding: 8px;" title="inline-axis &apos;self-start&apos; alignment with LTR context"> 
     <figcaption> <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑥">start</a> vs <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start③">self-start</a> on the individual items </figcaption>
    </figure>
   </aside>
   <div class="note" id="flexbox-exception" role="note">
    <a class="self-link" href="#flexbox-exception"></a> For most layout models (block, table, grid, etc),
		the <a class="property" data-link-type="propdesc">justify-*</a> properties always align things in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis④">inline axis</a>,
		while the <span class="property">align-*</span> properties always align things in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis④">block axis</a>. 
    <p>Flexbox, on the other hand, has <a class="property" data-link-type="propdesc">justify-*</a> align things in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis①">main axis</a> and <span class="property">align-*</span> align things in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis①">cross axis</a>.
		This depends on the value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction" id="ref-for-propdef-flex-direction">flex-direction</a>:
		when <span class="property" id="ref-for-propdef-flex-direction①">flex-direction</span> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row" id="ref-for-valdef-flex-direction-row">row</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row-reverse" id="ref-for-valdef-flex-direction-row-reverse">row-reverse</a>,
		it matches the other layout modes
		(<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑤">inline axis</a> with <span class="property">justify-*</span>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑤">block axis</a> with <span class="property">align-*</span>);
		when <span class="property" id="ref-for-propdef-flex-direction②">flex-direction</span> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column" id="ref-for-valdef-flex-direction-column">column</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column-reverse" id="ref-for-valdef-flex-direction-column-reverse">column-reverse</a>,
		it has the opposite correspondence.</p>
   </div>
   <p class="issue" id="issue-bb5da799"><a class="self-link" href="#issue-bb5da799"></a> Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows. </p>
   <h3 class="heading settled" data-level="4.2" id="baseline-values"><span class="secno">4.2. </span><span class="content"> Baseline Alignment: the <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline">baseline</a> keyword and <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline">first</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline">last</a> modifiers</span><a class="self-link" href="#baseline-values"></a></h3>
   <p>See <a href="https://www.w3.org/TR/css-writing-modes-3/#intro-baselines">CSS Writing Modes 3 §4.1 Introduction to Baselines</a>.</p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-alignment">Baseline alignment</dfn> is a form of positional alignment
	that aligns multiple <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②①">alignment subjects</a> within a <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①">shared alignment context</a> (such as cells within a row)
	by matching up their <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline">alignment baselines</a>.
	If the position of the <span id="ref-for-alignment-subject②②">alignment subjects</span> within a <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group">baseline-sharing group</a> is not fully constrained by <a data-link-type="dfn" href="#baseline-alignment" id="ref-for-baseline-alignment">baseline alignment</a> (i.e., they could be shifted within their respective <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①④">alignment containers</a> while maintaining baseline-alignment),
	they are <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment">fallback-aligned</a> insofar as possible while preserving their <span id="ref-for-baseline-alignment①">baseline alignment</span>.</p>
   <p>The baseline alignment keywords are represented with the <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position" title="Expands to: last | baseline | first">&lt;baseline-position></a> grammar term:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-baseline-position">&lt;baseline-position></dfn> = [ first <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> last ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> baseline
</pre>
   <p>The <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline①">first</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline①">last</a> values give a box a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-alignment-preference">baseline alignment preference</dfn>:
	either “first” or “last”, respectively,
	defaulting to “first”.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="justify-self, justify-items, align-content, align-self, align-items, <baseline-position>" data-dfn-type="value" data-export id="valdef-justify-self-baseline">baseline</dfn> 
    <dd> Computes to <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline②">first baseline</a>, defined below. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="justify-self, justify-items, align-content, align-self, align-items, <baseline-position>" data-dfn-type="value" data-export data-lt="first baseline | first" id="valdef-justify-self-first-baseline">first baseline</dfn> 
    <dd>
      Specifies participation in <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export id="first-baseline-alignment">first-baseline alignment</dfn>:
			aligns the <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline①">alignment baseline</a> of the box’s <a data-link-type="dfn" href="#first-baseline-set" id="ref-for-first-baseline-set">first baseline set</a> with the corresponding baseline
			of its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①">baseline-sharing group</a>.
			See <a href="#align-by-baseline">§ 9.3 Aligning Boxes by Baseline</a> for more details. 
     <p>The <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①">fallback alignment</a> for <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline③">first baseline</a> is <span class="css">safe self-start</span> (for <a data-link-type="dfn" href="#self-align" id="ref-for-self-align">self-alignment</a>)
			or <span class="css">safe start</span> (for <a data-link-type="dfn" href="#content-distribute" id="ref-for-content-distribute">content-distribution</a>).</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="justify-self, justify-items, align-content, align-self, align-items, <baseline-position>" data-dfn-type="value" data-export data-lt="last baseline | last" id="valdef-justify-self-last-baseline">last baseline</dfn> 
    <dd>
      Specifies participation in <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export id="last-baseline-alignment">last-baseline alignment</dfn>:
			aligns the <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline②">alignment baseline</a> of the box’s <a data-link-type="dfn" href="#last-baseline-set" id="ref-for-last-baseline-set">last baseline set</a> with the corresponding baseline
			of its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group②">baseline-sharing group</a>.̣
			See <a href="#align-by-baseline">§ 9.3 Aligning Boxes by Baseline</a> for more details. 
     <p>The <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment②">fallback alignment</a> for <a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline②">last baseline</a> is <span class="css">safe self-end</span> (for <a data-link-type="dfn" href="#self-align" id="ref-for-self-align①">self-alignment</a>)
			or <span class="css">safe end</span> (for <a data-link-type="dfn" href="#content-distribute" id="ref-for-content-distribute①">content-distribution</a>).</p>
   </dl>
   <p>When specified for <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content③">align-content</a>,
	these values trigger <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment">baseline content-alignment</a>,
	shifting the content of the box within its content box,
	and may also affect the sizing of the box itself.
	See <a href="#baseline-align-content">§ 5.4 Baseline Content-Alignment</a>.</p>
   <p>When specified for <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self⑦">align-self</a>/<a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self⑤">justify-self</a>,
	these values trigger <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment">baseline self-alignment</a>,
	shifting the entire box within its container,
	which may affect the sizing of its container.
	See <a href="#baseline-align-self">§ 6.4 Baseline Self-Alignment</a>.</p>
   <p>If both <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①">baseline content-alignment</a> <em>and</em> <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment①">baseline self-alignment</a> are specified in the same axis on the same box,
	only <span id="ref-for-baseline-self-alignment②">baseline self-alignment</span> is honored in that axis;
	the content-alignment in that axis must be treated as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑦">start</a>.</p>
   <p class="issue" id="issue-13b9ed6a"><a class="self-link" href="#issue-13b9ed6a"></a>Add example images here. </p>
   <p>If a box does not belong to a <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context②">shared alignment context</a>,
	then the <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment③">fallback alignment</a> is used.
	For example, <a class="css" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content④">align-content: baseline</a> on a block box
	falls back to <span class="css">start</span> alignment.
	The <span id="ref-for-fallback-alignment④">fallback alignment</span> is also used to align the <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group③">baseline-sharing group</a> within its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①⑤">alignment container</a>.</p>
   <p class="note" role="note"><span>Note:</span> Because they are equivalent, and <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline①">baseline</a> is shorter,
	the CSSOM serializes <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline④">first baseline</a> as <span class="css" id="ref-for-valdef-justify-self-baseline②">baseline</span>.
	See <a href="https://www.w3.org/TR/cssom-1/#serializing-css-values">CSSOM 1 §5.7.2 Serializing CSS Values</a>.</p>
   <p class="note" role="note"><span>Note:</span> For the somewhat-related <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" id="ref-for-propdef-vertical-align①">vertical-align</a> property,
	due to inconsistent design decisions in CSS2.1, <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline③">baseline</a> is not equivalent to <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑤">first baseline</a> as an inline-level box’s <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference">baseline alignment preference</a> depends on <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a>.
	(E.g., <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block">inline-block</a> uses its last baseline by default,
	while <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-table" id="ref-for-valdef-display-inline-table">inline-table</a> uses its first baseline by default.)</p>
   <h3 class="heading settled" data-level="4.3" id="distribution-values"><span class="secno">4.3. </span><span class="content"> Distributed Alignment: the <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch">stretch</a>, <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between①">space-between</a>, <a class="css" data-link-type="maybe" href="#valdef-align-content-space-around" id="ref-for-valdef-align-content-space-around">space-around</a>, and <a class="css" data-link-type="maybe" href="#valdef-align-content-space-evenly" id="ref-for-valdef-align-content-space-evenly">space-evenly</a> keywords</span><a class="self-link" href="#distribution-values"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="distributed-alignment">distributed alignment</dfn> values are used by <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content④">justify-content</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content⑤">align-content</a> to disperse a container’s extra space among its <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②③">alignment subjects</a>.</p>
   <figure>
     <img alt="space-between | space-around | space-evenly | stretch" src="images/distribute.svg"> 
    <figcaption>The <a data-link-type="dfn" href="#distributed-alignment" id="ref-for-distributed-alignment">distributed alignment</a> values</figcaption>
   </figure>
   <p>When space cannot be distributed in this way,
	these values behave as their <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment⑤">fallback alignment</a>.
	Each distribution value has an associated default <span id="ref-for-fallback-alignment⑥">fallback alignment</span>.
	(A future level of this module may allow the <span id="ref-for-fallback-alignment⑦">fallback alignment</span> to be specified explicitly.)</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="align-content, justify-content, <content-distribution>" data-dfn-type="value" data-export id="valdef-align-content-space-between">space-between</dfn> 
    <dd>
      The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②④">alignment subjects</a> are evenly distributed in the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①⑥">alignment container</a>.
			The first <span id="ref-for-alignment-subject②⑤">alignment subject</span> is placed flush with the start edge of the <span id="ref-for-alignment-container①⑦">alignment container</span>,
			the last <span id="ref-for-alignment-subject②⑥">alignment subject</span> is placed flush with the end edge of the <span id="ref-for-alignment-container①⑧">alignment container</span>,
			and the remaining <span id="ref-for-alignment-subject②⑦">alignment subjects</span> are distributed so that the spacing between any two adjacent <span id="ref-for-alignment-subject②⑧">alignment subjects</span> is the same. 
     <figure> <img alt="For example, given three items, all excess space is split in two and distributed: one half between the first two and one half between the last two items." src="images/space-between.svg"> </figure>
     <p>The default <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment⑧">fallback alignment</a> for this value is <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start①">flex-start</a>. <span class="note">(For layout modes other than flex layout, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start②">flex-start</a> is identical to <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑧">start</a>.)</span></p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="align-content, justify-content, <content-distribution>" data-dfn-type="value" data-export id="valdef-align-content-space-around">space-around</dfn> 
    <dd>
      The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject②⑨">alignment subjects</a> are evenly distributed in the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container①⑨">alignment container</a>,
			with a half-size space on either end.
			The <span id="ref-for-alignment-subject③⓪">alignment subjects</span> are distributed so that the spacing between any two adjacent <span id="ref-for-alignment-subject③①">alignment subjects</span> is the same,
			and the spacing before the first and after the last <span id="ref-for-alignment-subject③②">alignment subject</span> is half the size of the other spacing. 
     <figure> <img alt="For example, given three items, all excess space is split into sixths and distributed: one sixth at the start, one at the end, and two sixths (one third) each between the first two and between the last two items." src="images/space-around.svg"> </figure>
     <p>The default <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment⑨">fallback alignment</a> for this value is <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center①">center</a>.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="align-content, justify-content, <content-distribution>" data-dfn-type="value" data-export id="valdef-align-content-space-evenly">space-evenly</dfn> 
    <dd>
      The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject③③">alignment subjects</a> are evenly distributed in the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⓪">alignment container</a>,
			with a full-size space on either end.
			The <span id="ref-for-alignment-subject③④">alignment subjects</span> are distributed so that the spacing between any two adjacent <span id="ref-for-alignment-subject③⑤">alignment subjects</span>,
			before the first <span id="ref-for-alignment-subject③⑥">alignment subject</span>,
			and after the last <span id="ref-for-alignment-subject③⑦">alignment subject</span> is the same. 
     <figure> <img alt="For example, given three items, all excess space is split into fourths and distributed: to the start, to the end, to between the first two, and to between the last two items." src="images/space-evenly.svg"> </figure>
     <p>The default <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①⓪">fallback alignment</a> for this value is <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center②">center</a>.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="align-content, justify-content, <content-distribution>" data-dfn-type="value" data-export id="valdef-align-content-stretch">stretch</dfn> 
    <dd>
      If the combined size of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject③⑧">alignment subjects</a> is less than the size of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②①">alignment container</a>,
			any <span class="css">auto</span>-sized <span id="ref-for-alignment-subject③⑨">alignment subjects</span> have their size increased equally (not proportionally),
			while still respecting the constraints imposed by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height" id="ref-for-propdef-max-height">max-height</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width" id="ref-for-propdef-max-width">max-width</a> (or equivalent functionality),
			so that the combined size exactly fills the <span id="ref-for-alignment-container②②">alignment container</span>. 
     <figure> <img alt="For example, given three items, all excess space is split into thirds and distributed: one third to each item." src="images/space-stretch.svg"> </figure>
     <p>The default <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①①">fallback alignment</a> for this value is <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start③">flex-start</a>. <span class="note">(For layout modes other than flex layout, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start④">flex-start</a> is identical to <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start①⑨">start</a>.)</span></p>
   </dl>
   <p>These values are represented with the <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution" title="Expands to: stretch | space-between | space-around | space-evenly">&lt;content-distribution></a> grammar term:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-content-distribution">&lt;content-distribution></dfn> = space-between <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> space-around <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> space-evenly <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> stretch</pre>
   <h3 class="heading settled" data-level="4.4" id="overflow-values"><span class="secno">4.4. </span><span class="content"> Overflow Alignment: the <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe" id="ref-for-valdef-overflow-position-safe①">safe</a> and <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe">unsafe</a> keywords and scroll safety limits</span><a class="self-link" href="#overflow-values"></a></h3>
   <p>When the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⓪">alignment subject</a> is larger than the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②③">alignment container</a>,
	it will overflow.
	Some alignment modes, if honored in this situation,
	may cause data loss:
	for example, if the contents of a sidebar are centered,
	when they overflow they may send part of their boxes past the viewport’s start edge,
	which can’t be scrolled to.</p>
   <div class="example" id="example-a705a051">
    <a class="self-link" href="#example-a705a051"></a> The figure below illustrates the difference in “safe” versus “unsafe” centering,
		using a column flexbox as an example: 
    <figure>
     <div style="display:table; margin: 0 auto 1em;">
      <div class="cross-auto-figure" style="display:table-cell; padding-right: 50px;">
       <div>
        <div>About</div>
        <div style="white-space: nowrap; margin-left: -31px;">Authoritarianism</div>
        <div>Blog</div>
       </div>
      </div>
      <div class="cross-auto-figure" style="display:table-cell; padding-left: 50px;">
       <div>
        <div>About</div>
        <div style="white-space: nowrap;">Authoritarianism</div>
        <div>Blog</div>
       </div>
      </div>
     </div>
     <figcaption> The items in the figure on the right all strictly centered,
				even if the one that is too long to fit overflows on both sides,
				while those in the figure on the left are centered unless they overflow,
				in which case all the overflow goes off the end edge.
				If the container was placed
				against the left edge of the page,
				the “safe” behavior would be more desirable,
				as the long item would be fully readable,
				rather than clipped by the left edge of the screen.
				In other circumstances,
				the “unsafe” centering behavior might be better,
				as it correctly centers all the items. </figcaption>
    </figure>
   </div>
   <p>To control this situation,
	an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="overflow-alignment">overflow alignment</dfn> mode can be explicitly specified.
	“Unsafe” alignment honors the specified alignment mode in overflow situations, even if it causes data loss,
	while “safe” alignment changes the alignment mode in overflow situations in an attempt to avoid data loss.
	The default behavior is to contain the alignment subject within the scrollable area,
	though at the time of writing this safety feature is not yet implemented.</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-overflow-position">&lt;overflow-position></dfn> = unsafe <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> safe</pre>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<overflow-position>" data-dfn-type="value" data-export id="valdef-overflow-position-safe">safe</dfn> 
    <dd> If the size of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④①">alignment subject</a> overflows the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②④">alignment container</a>,
			the <span id="ref-for-alignment-subject④②">alignment subject</span> is instead aligned as if the alignment mode were <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⓪">start</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<overflow-position>" data-dfn-type="value" data-export id="valdef-overflow-position-unsafe">unsafe</dfn> 
    <dd> Regardless of the relative sizes of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④③">alignment subject</a> and <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑤">alignment container</a>,
			the given alignment value is honored. 
    <dt>(no value specified) 
    <dd>
      If the <a data-link-type="dfn" href="#overflow-alignment" id="ref-for-overflow-alignment">overflow alignment</a> isn’t explicitly specified,
			the default <span id="ref-for-overflow-alignment①">overflow alignment</span> is a blend of “safe” and “unsafe”
			in that an overflowing <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④④">alignment subject</a> is allowed to overflow its <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑥">alignment container</a>,
			but if this would cause it to also overflow
			the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region">scrollable overflow region</a> of its nearest ancestor <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a> (thus extending into the “unscrollable” region),
			then its overflow in that direction is limited
			by biasing any remaining overflow to the opposite side. 
     <p class="issue" id="issue-f6ca8ac3"><a class="self-link" href="#issue-f6ca8ac3"></a> It may not be Web-compatible to implement the “smart” default behavior
			(though we hope so, and believe it to be likely),
			so UAs should pass any feedback on this point to the WG.
			UAs that have not implemented the “smart” default behavior
			must behave as <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe①">unsafe</a>.</p>
   </dl>
   <h2 class="heading settled" data-level="5" id="content-distribution"><span class="secno">5. </span><span class="content"> Content Distribution: Aligning a Box’s Contents Within Itself</span><a class="self-link" href="#content-distribution"></a></h2>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-distribute">Content-distribution</dfn> controls alignment of the box’s content within its content box.
	It is specified by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-distribution-properties">content-distribution properties</dfn> <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content⑥">align-content</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑤">justify-content</a> (and their <a class="property" data-link-type="propdesc" href="#propdef-place-content" id="ref-for-propdef-place-content">place-content</a> shorthand).</p>
   <div class="figure"> <img alt="Diagram showing that the alignment of the content within the element is affected." height="212" src="images/content-example.svg" width="212"> </div>
   <h3 class="heading settled" data-level="5.1" id="align-justify-content"><span class="secno">5.1. </span><span class="content"> The <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑥">justify-content</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content⑦">align-content</a> Properties</span><a class="self-link" href="#align-justify-content"></a></h3>
   <table class="def propdef" data-link-for-hint="align-content">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-align-content">align-content</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position①" title="Expands to: last | baseline | first">&lt;baseline-position></a> <span id="ref-for-comb-one①⑥">|</span> <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution①" title="Expands to: stretch | space-between | space-around | space-evenly">&lt;content-distribution></a> <span id="ref-for-comb-one①⑦">|</span> <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position②" title="Expands to: safe | unsafe">&lt;overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position②" title="Expands to: flex-start | flex-end | end | center | start">&lt;content-position></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal 
     <tr>
      <th>Applies to:
      <td>block containers, multicol containers, flex containers, and grid containers 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <table class="def propdef" data-link-for-hint="justify-content">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-justify-content">justify-content</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution②" title="Expands to: stretch | space-between | space-around | space-evenly">&lt;content-distribution></a> <span id="ref-for-comb-one①⑨">|</span> <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position③" title="Expands to: safe | unsafe">&lt;overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> [ <a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position③" title="Expands to: flex-start | flex-end | end | center | start">&lt;content-position></a> <span id="ref-for-comb-one②⓪">|</span> left <span id="ref-for-comb-one②①">|</span> right ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal 
     <tr>
      <th>Applies to:
      <td>multicol containers, flex containers, and grid containers 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>Aligns the contents of the box as a whole (as the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑤">alignment subject</a>)
	within the box itself (as the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑦">alignment container</a>):
	along the inline/row/main axis of the box (for <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑦">justify-content</a>)
	or the block/column/cross axis of the box (for <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content⑧">align-content</a>).
	Values other than <dfn class="dfn-paneled css" data-dfn-for="justify-content, align-content" data-dfn-type="value" data-export id="valdef-justify-content-normal">normal</dfn> are defined in <a href="#alignment-values">§ 4 Alignment Keywords</a>, above.</p>
   <p>For all layout modes,
	the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑥">alignment subject</a> and <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑧">alignment container</a> both assume the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑥">writing mode</a> of the box the <a class="property" data-link-type="propdesc">*-content</a> property is set on.</p>
   <h4 class="heading settled" data-level="5.1.1" id="distribution-block"><span class="secno">5.1.1. </span><span class="content">Block Containers (Including Table Cells)</span><a class="self-link" href="#distribution-block"></a></h4>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container②⑨">Alignment Container</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container②">block container</a>’s content box. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑦">Alignment Subject(s)</a> 
      <td> The entire contents of the block, as a unit. 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content⑨">align-content</a> Axis 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑥">block axis</a>.
				If a <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution③" title="Expands to: stretch | space-between | space-around | space-evenly">&lt;content-distribution></a> is specified
				its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①②">fallback alignment</a> is used instead. 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑧">justify-content</a> Axis 
      <td> Does not apply to and has no effect on <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container③">block containers</a>. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal">normal</a> Behavior 
      <td>
        All values other than <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal①">normal</a> force the block container to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context">establish an independent formatting context</a>. 
       <p>For table cells, the behavior of the <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal②">normal</a> depends on the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" id="ref-for-propdef-vertical-align②">vertical-align</a>: <span class="css">top</span> makes it behave as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②①">start</a>, <span class="css">middle</span> makes it behave as <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center③">center</a>, <span class="css">bottom</span> makes it behave as <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①③">end</a>,
				and all other values make it behave as <a class="css" data-link-type="maybe" href="#valdef-justify-self-baseline" id="ref-for-valdef-justify-self-baseline④">baseline</a>. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a></p>
       <p><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal③">normal</a> otherwise behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②②">start</a>.</p>
   </table>
   <h4 class="heading settled" data-level="5.1.2" id="distribution-multicol"><span class="secno">5.1.2. </span><span class="content">Multicol Containers</span><a class="self-link" href="#distribution-multicol"></a></h4>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③⓪">Alignment Container</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column container</a>’s content box. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑧">Alignment Subject(s)</a> 
      <td> The column boxes,
				with any spacing inserted between column boxes
				added to the relevant column gaps. 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①⓪">align-content</a> Axis 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑦">block axis</a>,
				treating the column boxes
				(and any column-spanning elements),
				as a singular unit.
				If a <a class="production css" data-link-type="type" href="#typedef-content-distribution" id="ref-for-typedef-content-distribution④" title="Expands to: stretch | space-between | space-around | space-evenly">&lt;content-distribution></a> is specified
				its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①③">fallback alignment</a> is used instead. 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content⑨">justify-content</a> Axis 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑥">inline axis</a>. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal④">normal</a> Behavior 
      <td>
        <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑤">normal</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch①">stretch</a>;
				both are defined as described in the column-sizing rules
				of <a data-link-type="biblio" href="#biblio-css-multicol-1">[CSS-MULTICOL-1]</a>. 
       <p>In the case of multi-column containers with a non-<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-multicol-1/#valdef-column-width-auto" id="ref-for-valdef-column-width-auto">auto</a> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width" id="ref-for-propdef-column-width">column-width</a>, <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⓪">justify-content</a> values other than <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑥">normal</a> or <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch②">stretch</a> cause the columns to take their specified <span class="property" id="ref-for-propdef-column-width①">column-width</span> rather than stretching to fill the container.
				The column boxes are then aligned as specified by <span class="property" id="ref-for-propdef-justify-content①①">justify-content</span>.</p>
   </table>
   <h4 class="heading settled" data-level="5.1.3" id="distribution-flex"><span class="secno">5.1.3. </span><span class="content">Flex Containers</span><a class="self-link" href="#distribution-flex"></a></h4>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③①">Alignment Container</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑧">flex container</a>’s content box. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject④⑨">Alignment Subject(s)</a> 
      <td>
        For <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①②">justify-content</a>,
				the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑤">flex items</a> in each <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line">flex line</a>. 
       <p>For <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①①">align-content</a>,
				the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line①">flex lines</a>.
				Note, this only has an effect on <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#multi-line-flex-container" id="ref-for-multi-line-flex-container">multi-line flex containers</a>.</p>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①②">align-content</a> Axis 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis②">cross axis</a>. 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①③">justify-content</a> Axis 
      <td> The <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①④">justify-content</a> property applies along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis②">main axis</a>,
				but since stretching in the <span id="ref-for-main-axis③">main axis</span> is controlled by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex" id="ref-for-propdef-flex">flex</a>, <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch③">stretch</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start⑤">flex-start</a>. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑦">normal</a> Behavior 
      <td> <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑧">normal</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch④">stretch</a>. 
   </table>
   <p>See <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a> for details.</p>
   <h4 class="heading settled" data-level="5.1.4" id="distribution-grid"><span class="secno">5.1.4. </span><span class="content">Grid Containers</span><a class="self-link" href="#distribution-grid"></a></h4>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③②">Alignment Container</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container③">grid container</a>’s content box. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⓪">Alignment Subject(s)</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-track" id="ref-for-grid-track">grid tracks</a> in the appropriate axis,
				with any spacing inserted between tracks
				added to the relevant <a data-link-type="dfn" href="#gutter" id="ref-for-gutter">gutters</a>,
				and treating <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#collapsed-gutter" id="ref-for-collapsed-gutter">collapsed gutters</a> as a single opportunity for space insertion. 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①③">align-content</a> Axis 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑧">block axis</a>,
				aligning the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-row" id="ref-for-grid-row">grid rows</a>. 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑤">justify-content</a> Axis 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑦">inline axis</a>,
				aligning the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-column" id="ref-for-grid-column">grid columns</a>. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal⑨">normal</a> Behavior 
      <td> <a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal①⓪">normal</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch⑤">stretch</a>. 
   </table>
   <p>See <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a> for details.</p>
   <h3 class="heading settled" data-level="5.2" id="place-content"><span class="secno">5.2. </span><span class="content"> Content-Distribution Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-place-content" id="ref-for-propdef-place-content①">place-content</a> property</span><a class="self-link" href="#place-content"></a></h3>
   <table class="def propdef" data-link-for-hint="place-content">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-place-content">place-content</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①④">&lt;'align-content'></a> <a class="production" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑥">&lt;'justify-content'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal 
     <tr>
      <th>Applies to:
      <td>block containers, flex containers, and grid containers 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property">shorthand property</a> sets both the <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①⑤">align-content</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑦">justify-content</a> properties in one declaration.
	The first value is assigned to <span class="property" id="ref-for-propdef-align-content①⑥">align-content</span>.
	The second value is assigned to <span class="property" id="ref-for-propdef-justify-content①⑧">justify-content</span>;
	if omitted, it is copied from the first value,
	unless that value is a <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position②" title="Expands to: last | baseline | first">&lt;baseline-position></a> in which case it is defaulted to <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②③">start</a>.</p>
   <h3 class="heading settled" data-level="5.3" id="overflow-scroll-position"><span class="secno">5.3. </span><span class="content"> Overflow and Scroll Positions</span><a class="self-link" href="#overflow-scroll-position"></a></h3>
   <p>When the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties②">content-distribution properties</a> are set
	on a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①">scroll container</a> with an overflowing <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤①">alignment subject</a>,
	rather than shifting the layout positions of its content,
	they instead change its <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#initial-scroll-position" id="ref-for-initial-scroll-position">initial scroll position</a> so that the initially-visible content
	of the <span id="ref-for-scroll-container②">scroll container</span> satisfies the <a href="#alignment-values">expected alignment</a> of the <span id="ref-for-alignment-subject⑤②">alignment subject</span> and <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③③">alignment container</a>.</p>
   <p class="note" role="note"><span>Note:</span> The presence of scrollbars can change the size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container③">scroll container’s</a> content box,
	and thus the size of the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③④">alignment container</a> and/or <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤③">alignment subject</a>.</p>
   <div class="example" id="example-aa19f42a"><a class="self-link" href="#example-aa19f42a"></a> For example,
		if a scrollable flex container is set to <a class="css" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content①⑨">justify-content: flex-end</a> (or <span class="css" id="ref-for-propdef-justify-content②⓪">justify-content: flex-start</span> with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow" id="ref-for-propdef-flex-flow">flex-flow: row-reverse</a>),
		it will be initially displayed scrolled all the way to the main-end edge of its content,
		and its content will appear to overflow its main-start edge. </div>
   <p>Because the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container④">scroll container</a>’s end-edge padding
	is not always included in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region①">scrollable overflow region</a> (see <a href="https://www.w3.org/TR/css-overflow-3/#scrollable">CSS Overflow 3 §2.2 Scrollable Overflow</a>),
	performing such alignment might require
	that the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤④">alignment subject</a> be positioned
	in a way that would normally not be possible just by scrolling.
	To resolve this problem
	(and be consistent across alignment values),
	all non-<a class="css" data-link-type="maybe" href="#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal①①">normal</a> values of <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①⑦">align-content</a>/<a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content②①">justify-content</a> cause the <span id="ref-for-scrollable-overflow-region②">scrollable overflow region</span> to be extended
	in the relevant axis
	however much would be required to make it possible to scroll
	to a position satisfying <span class="css">end</span> alignment in that axis.
	(In general, this means that the <span id="ref-for-scroll-container⑤">scroll container</span>’s padding
	is added to the bounding rectangle of its in-flow children
	on <em>both</em> sides of the <span id="ref-for-scrollable-overflow-region③">scrollable overflow region</span>.
	See <a data-link-type="biblio" href="#biblio-css-overflow-3">[css-overflow-3]</a> for details.)</p>
   <figure>
     <img alt src="images/scroll-align-padding.jpg"> 
    <figcaption> Issue: Replace this image with a proper SVG. </figcaption>
   </figure>
   <p class="issue" id="issue-9ce4b594"><a class="self-link" href="#issue-9ce4b594"></a> Coordinate wording with css-overflow once it’s less of a mess.</p>
   <p>None of this changes how scroll coordinates are assigned:
	the origin is still where it would be in a <span class="css">start</span>-aligned container,
	it just might be initially positioned outside the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport">scrollport</a>.</p>
   <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⑤">alignment subject</a> is not necessarily
	identical to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region④">scrollable overflow region</a>:
	content overflowing the <span id="ref-for-alignment-subject⑤⑥">alignment subject</span>,
	such as an absolutely-positioned or out-of-flow element,
	grows the <span id="ref-for-scrollable-overflow-region⑤">scrollable overflow region</span> but not the <span id="ref-for-alignment-subject⑤⑦">alignment subject</span>,
	thus an <span class="css">end</span>-aligned <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑥">scroll container</a> might not be initially scrolled all the way to the bottom.</p>
   <figure>
     <img alt src="images/scroll-align-overflow.jpg"> 
    <figcaption>
      Overflow is not part of the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⑧">alignment subject</a>,
			even for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑦">scroll container</a>. 
     <p class="issue" id="issue-f4825563"> Replace this image too.</p>
    </figcaption>
   </figure>
   <h3 class="heading settled" data-level="5.4" id="baseline-align-content"><span class="secno">5.4. </span><span class="content"> Baseline Content-Alignment</span><a class="self-link" href="#baseline-align-content"></a></h3>
   <p>The content of boxes participating in row-like layout contexts (<a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context③">shared alignment contexts</a>)
	can be baseline-aligned to each other. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="baseline content-alignment|first-baseline content-alignment|last-baseline content-alignment" id="baseline-content-alignment">Baseline content-alignment</dfn> effectively increases the <strong>padding</strong> on the box
	to align the <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline③">alignment baseline</a> of its contents
	with that of other baseline-aligned boxes in its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group④">baseline-sharing group</a>.</p>
   <p><a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment②">Baseline content-alignment</a> can only apply if the <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①⑧">align-content</a> axis
	is parallel with the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis⑨">block axis</a> (i.e. it does not apply to “column” <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑨">flex containers</a>);
	otherwise the <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①④">fallback alignment</a> is used.</p>
   <p>The set of boxes that participate in <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment③">baseline content-alignment</a> depends on the layout model:</p>
   <dl>
    <dt>Table Cells: 
    <dd>
      A <a data-link-type="dfn">table cell</a> participates in
			first/last <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment④">baseline content-alignment</a> in its startmost/endmost row
			if its inline axis is parallel to that of the table itself and
			its computed <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content①⑨">align-content</a> is <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑥">first baseline</a> (<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline③">last baseline</a>). 
     <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑤">Baseline content-alignment</a> of cells sharing a column is not supported;
			however this may be added in a future level
			if there is sufficient demand and implementer interest.</p>
    <dt>Flex Items: 
    <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑥">flex item</a> participates in
			first/last <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑥">baseline content-alignment</a> in its flex line if
			its computed <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content②⓪">align-content</a> is <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑦">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline④">last baseline</a> and its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑧">inline axis</a> is parallel to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis④">main axis</a>. 
    <dt>Grid Items: 
    <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item②">grid item</a> participates in
			first/last <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑦">baseline content-alignment</a> in its startmost/endmost row or column
			(whichever is parallel to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis⑨">inline axis</a>)
			and if its computed <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content②①">align-content</a> is <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑧">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑤">last baseline</a>. 
   </dl>
   <p>Additionally, if <a data-link-type="dfn" href="#self-align" id="ref-for-self-align②">self-alignment</a> applies to the box in an axis,
	in order to participate in <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑧">baseline content-alignment</a> in that axis
	it must also have a <dfn data-dfn-type="dfn" data-noexport id="coordinated-self-alignment-preference">coordinated self-alignment preference<a class="self-link" href="#coordinated-self-alignment-preference"></a></dfn>;
	that is:</p>
   <ul>
    <li data-md>
     <p>The relevant <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties②">self-alignment property</a> behaves as either <a class="css" data-link-type="maybe" href="#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch">stretch</a> or <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start④">self-start</a>/<a class="css" data-link-type="maybe" href="#valdef-self-position-self-end" id="ref-for-valdef-self-position-self-end②">self-end</a> given a <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference①">baseline alignment preference</a> of ”first”/“last”.
For this purpose,
the <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②④">start</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①④">end</a>, <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start⑥">flex-start</a>, and <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-end" id="ref-for-valdef-self-position-flex-end①">flex-end</a> values
are treated as either <span class="css" id="ref-for-valdef-self-position-self-start⑤">self-start</span> or <span class="css" id="ref-for-valdef-self-position-self-end③">self-end</span>,
whichever they end up equivalent to.</p>
    <li data-md>
     <p>Its used self-alignment is not affected by its <a data-link-type="dfn" href="#overflow-alignment" id="ref-for-overflow-alignment②">overflow alignment</a>.
(That is, the used self-alignment is what would result from an <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe" id="ref-for-valdef-overflow-position-unsafe②">unsafe</a> <span id="ref-for-overflow-alignment③">overflow alignment</span>.)</p>
   </ul>
   <p>It otherwise takes its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①⑤">fallback alignment</a>.</p>
   <p>See <a href="#align-by-baseline">§ 9.3 Aligning Boxes by Baseline</a> for exact details. <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment⑨">Baseline content-alignment</a> can increase the intrinsic size of the box.</p>
   <h2 class="heading settled" data-level="6" id="self-alignment"><span class="secno">6. </span><span class="content"> Self-Alignment: Aligning the Box Within Its Parent</span><a class="self-link" href="#self-alignment"></a></h2>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="self-align">Self-alignment</dfn> controls alignment of the box within its containing block.
	It is specified by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="self-alignment-properties">self-alignment properties</dfn> <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self⑧">align-self</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self⑥">justify-self</a> (and their <a class="property" data-link-type="propdesc" href="#propdef-place-self" id="ref-for-propdef-place-self">place-self</a> shorthand).</p>
   <div class="figure"> <img alt="Diagram showing that the alignment of the element within its containing block is affected." height="212" src="images/self-example.svg" width="212"> </div>
   <h3 class="heading settled" data-level="6.1" id="justify-self-property"><span class="secno">6.1. </span><span class="content"> Inline-Axis (or Main-Axis) Alignment: the <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self⑦">justify-self</a> property</span><a class="self-link" href="#justify-self-property"></a></h3>
   <table class="def propdef" data-link-for-hint="justify-self">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-justify-self">justify-self</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> normal <span id="ref-for-comb-one②③">|</span> stretch <span id="ref-for-comb-one②④">|</span> <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position③" title="Expands to: last | baseline | first">&lt;baseline-position></a> <span id="ref-for-comb-one②⑤">|</span> <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position④" title="Expands to: safe | unsafe">&lt;overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> [ <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position②" title="Expands to: end | center | flex-start | start | self-end | flex-end | self-start">&lt;self-position></a> <span id="ref-for-comb-one②⑥">|</span> left <span id="ref-for-comb-one②⑦">|</span> right ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>block-level boxes, absolutely-positioned boxes, and grid items 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>Justifies the box (as the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑤⑨">alignment subject</a>)
	within its containing block (as the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③⑤">alignment container</a>)
	along the inline/row/main axis of the <span id="ref-for-alignment-container③⑥">alignment container</span>:
	the box’s outer edges are aligned within its <span id="ref-for-alignment-container③⑦">alignment container</span> <a href="#alignment-values">as described by its alignment value</a>.
	Values have the following meanings:</p>
   <dl>
    <dt data-md><dfn class="css" data-dfn-for="justify-self" data-dfn-type="value" data-export id="valdef-justify-self-auto">auto<a class="self-link" href="#valdef-justify-self-auto"></a></dfn>
    <dd data-md>
     <p>Behaves as <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal">normal</a> if the box has no parent,
or when determining the actual position of an absolutely positioned box.
It behaves as the computed <a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items④">justify-items</a> value of the parent box
(minus any <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy①">legacy</a> keywords)
otherwise
(including when determining the <em>static</em> position
of an absolutely positioned box).</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="justify-self" data-dfn-type="value" data-export id="valdef-justify-self-normal">normal</dfn>
    <dd data-md>
     <p>Represents the “default” alignment for the layout mode.
Its behavior depends on the layout mode, as described below.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="justify-self" data-dfn-type="value" data-export id="valdef-justify-self-stretch">stretch</dfn>
    <dd data-md>
     <p>When the box’s computed <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width">width</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height">height</a> (as appropriate to the axis) is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a> and neither of its margins (in the appropriate axis) are <span class="css">auto</span>,
sets the box’s used size to the length necessary to make its outer size
as close to filling the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③⑧">alignment container</a> as possible
while still respecting the constraints imposed by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height" id="ref-for-propdef-min-height">min-height</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width" id="ref-for-propdef-min-width">min-width</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height" id="ref-for-propdef-max-height①">max-height</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width" id="ref-for-propdef-max-width①">max-width</a>.</p>
     <p>Unless otherwise specified, this value falls back to <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start" id="ref-for-valdef-self-position-flex-start⑦">flex-start</a> generally,
and to <a class="css" data-link-type="maybe" href="#valdef-self-position-self-start" id="ref-for-valdef-self-position-self-start⑥">self-start</a> or <a class="css" data-link-type="maybe" href="#valdef-self-position-self-end" id="ref-for-valdef-self-position-self-end④">self-end</a> if the box has also specified <a data-link-type="dfn" href="#first-baseline-set" id="ref-for-first-baseline-set①">first baseline</a> or <a data-link-type="dfn" href="#last-baseline-set" id="ref-for-last-baseline-set①">last baseline</a> <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①⓪">baseline content-alignment</a> (respectively)
in the same axis.</p>
     <p class="note" role="note"><span>Note:</span> The <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch">stretch</a> keyword can cause elements to shrink,
to fit their container.</p>
    <dt data-md><a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position④" title="Expands to: last | baseline | first">&lt;baseline-position></a>
    <dd data-md>
     <p>Indicates <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment③">baseline self-alignment</a>,
as defined in <a href="#baseline-values">§ 4.2 Baseline Alignment: the baseline keyword and first/last modifiers</a>, <a href="#baseline-align-self">§ 6.4 Baseline Self-Alignment</a>,
and <a href="#baseline-rules">§ 9 Baseline Alignment Details</a>.</p>
    <dt data-md><a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑤" title="Expands to: safe | unsafe">&lt;overflow-position></a>? <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position③" title="Expands to: end | center | flex-start | start | self-end | flex-end | self-start">&lt;self-position></a>
    <dd data-md>
     <p>Defined in <a href="#alignment-values">§ 4 Alignment Keywords</a>, above.</p>
   </dl>
   <p>Values other than <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch①">stretch</a> cause a <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①">width</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①">height</a> of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a> to be treated as <span class="css">fit-content</span>.</p>
   <p class="note" role="note"><span>Note:</span> <span class="css">auto</span> margins,
	because they effectively adjust the size of the margin area,
	take precedence over <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self⑧">justify-self</a>.</p>
   <h4 class="heading settled" data-level="6.1.1" id="justify-block"><span class="secno">6.1.1. </span><span class="content">Block-Level Boxes</span><a class="self-link" href="#justify-block"></a></h4>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self⑨">justify-self</a> Axis 
      <td> The block’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①⓪">inline axis</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container③⑨">Alignment Container</a> 
      <td> The block’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a>,
				except that for block-level elements that establish a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-formatting-context" id="ref-for-block-formatting-context">block formatting context</a> and are placed next to a float,
				the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⓪">alignment container</a> is reduced by the space taken up by the float,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑦">writing mode</a> of the <span id="ref-for-containing-block②">containing block</span>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⓪">Alignment Subject</a> 
      <td> The block’s margin box,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑧">writing mode</a> of the block. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal①">normal</a> Behavior 
      <td> Behaves as <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch②">stretch</a>. 
     <tr>
      <th>Other Details 
      <td>
        In terms of CSS2.1 block-level formatting <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>,
				the rules for “over-constrained” computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">section 10.3.3</a> are ignored in favor of alignment as specified here
				and the used value of the margin properties are therefore not adjusted to correct for the over-constraint. 
       <p>This property does not apply to floats.</p>
   </table>
   <div class="example" id="example-cd8dae8e"><a class="self-link" href="#example-cd8dae8e"></a> The effect of these rules is that an auto-sized block-level table,
		for example, can be aligned while still having side margins.
		If the table’s max-content size is narrower than its containing block,
		then it is shrink-wrapped to that size and aligned as specified.
		If the table’s max-content size is wider, then it fills its containing block,
		and the margins provide appropriate spacing from the containing block edges. </div>
   <h4 class="heading settled" data-level="6.1.2" id="justify-abspos"><span class="secno">6.1.2. </span><span class="content">Absolutely-Positioned Boxes</span><a class="self-link" href="#justify-abspos"></a></h4>
   <p>This section describes the effect of <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①⓪">justify-self</a> on how the margin box of an absolutely-positioned box
	is positioned with respect to its (absolute-positioning) containing block.</p>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①①">justify-self</a> Axis 
      <td> The block’s containing block’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①①">inline axis</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④①">Alignment Container</a> 
      <td> The box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block③">containing block</a>,
				as modified by the inset properties (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a>),
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode⑨">writing mode</a> of the <span id="ref-for-containing-block④">containing block</span>.
				If both inset properties in the relevant axis are <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①">auto</a>,
				then use the box’s <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle">static position rectangle</a> (i.e. set both insets to the box’s <a data-link-type="dfn">static position</a>). 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥①">Alignment Subject</a> 
      <td> The box’s margin box,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①⓪">writing mode</a> of the box. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal②">normal</a> Behavior 
      <td>
       <ul>
        <li data-md>
         <p>For replaced absolutely-positioned boxes, the <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal③">normal</a> keyword behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⑤">start</a>.</p>
        <li data-md>
         <p>For all other absolutely-positioned boxes, <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal④">normal</a> behaves as stretch.
Additionally, if neither inset in this axis is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto②">auto</a>,
but <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②">width</a> (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height②">height</a>, for <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode①">vertical writing modes</a>) is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②">auto</a>, <span class="css">auto</span> margins are treated as zero.</p>
         <p>(In non-<a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑤">normal</a> cases, <span class="css">auto</span> margins are prioritized over the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties③">self-alignment properties</a>, as usual.)</p>
       </ul>
       <p class="note" role="note"><span>Note:</span> This somewhat bizarre behavior is required for compatibility with the behavior specified in CSS 2.1.</p>
     <tr>
      <th>Other Details 
      <td>
        In terms of CSS2.1 formatting <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>,
				the rules for “over-constrained” computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">section 10.3.7</a> are ignored in favor of alignment as specified here,
				and the used value of the inset properties are not adjusted to correct for the over-constraint. 
       <p>Values other than <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch③">stretch</a> or <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑥">normal</a> cause <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a> to use <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fit-content-size" id="ref-for-fit-content-size">fit-content sizing</a> for calculating <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto③">auto</a> sizes
				in the affected axis.</p>
       <p>Note that <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch④">stretch</a> <em>does</em> cause replaced absolutely-positioned boxes
				to fill their containing block
				just as non-replaced ones do.</p>
       <p class="note" role="note"><span>Note:</span> If only one inset property is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto③">auto</a>,
				the computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2 section 10.3.7</a> fully determine its size and position,
				and <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①②">justify-self</a> has no effect.
				(If both are <span class="css" id="ref-for-valdef-top-auto④">auto</span>,
				then the box is statically-positioned,
				see above,
				and can be aligned within the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle①">static position rectangle</a>.)</p>
   </table>
   <h4 class="heading settled" data-level="6.1.3" id="justify-cell"><span class="secno">6.1.3. </span><span class="content">Table Cells</span><a class="self-link" href="#justify-cell"></a></h4>
   <p>This property does not apply to table cells,
	because their position and size is fully constrained by table layout.</p>
   <h4 class="heading settled" data-level="6.1.4" id="justify-flex"><span class="secno">6.1.4. </span><span class="content">Flex Items</span><a class="self-link" href="#justify-flex"></a></h4>
   <p>This property does not apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑦">flex items</a>,
	because there is more than one item in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis⑤">main axis</a>.
	See <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex" id="ref-for-propdef-flex①">flex</a> for stretching and <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content②②">justify-content</a> for <span id="ref-for-main-axis⑥">main-axis</span> alignment. <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a></p>
   <h4 class="heading settled" data-level="6.1.5" id="justify-grid"><span class="secno">6.1.5. </span><span class="content">Grid Items</span><a class="self-link" href="#justify-grid"></a></h4>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①③">justify-self</a> Axis 
      <td> The grid’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①②">inline axis</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④②">Alignment Container</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item③">grid item’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-area" id="ref-for-grid-area">grid area</a>,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①①">writing mode</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container④">grid container</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥②">Alignment Subject</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item④">grid item’s</a> margin box,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①②">writing mode</a> of the <span id="ref-for-grid-item⑤">grid item</span>. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑦">normal</a> Behavior 
      <td> Effectively <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch⑤">stretch</a> for items with no intrinsic aspect ratio,
				and <span class="css">start</span> for items with an intrinsic aspect ratio:
				see <a href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">Grid Item Sizing</a> in <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a>.
				The resulting box is start-aligned. 
   </table>
   <p>See <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a> for details.</p>
   <h3 class="heading settled" data-level="6.2" id="align-self-property"><span class="secno">6.2. </span><span class="content"> Block-Axis (or Cross-Axis) Alignment: the <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self⑨">align-self</a> property</span><a class="self-link" href="#align-self-property"></a></h3>
   <table class="def propdef" data-link-for-hint="align-self">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-align-self">align-self</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑧">|</a> normal <span id="ref-for-comb-one②⑨">|</span> stretch <span id="ref-for-comb-one③⓪">|</span> <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑤" title="Expands to: last | baseline | first">&lt;baseline-position></a> <span id="ref-for-comb-one③①">|</span> <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑥" title="Expands to: safe | unsafe">&lt;overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position④" title="Expands to: end | center | flex-start | start | self-end | flex-end | self-start">&lt;self-position></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>flex items, grid items, and absolutely-positioned boxes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>Aligns the box (as the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥③">alignment subject</a>)
	within its containing block (as the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④③">alignment container</a>)
	along the block/column/cross axis of the <span id="ref-for-alignment-container④④">alignment container</span>:
	the box’s outer edges are aligned within its <span id="ref-for-alignment-container④⑤">alignment container</span> <a href="#alignment-values">as described by its alignment value</a>.
	Values have the following meanings:</p>
   <dl>
    <dt data-md><dfn class="css" data-dfn-for="align-self" data-dfn-type="value" data-export id="valdef-align-self-auto">auto<a class="self-link" href="#valdef-align-self-auto"></a></dfn>
    <dd data-md>
     <p>Behaves as <a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal">normal</a> if the box has no parent,
or when determining the actual position of an absolutely positioned box.
It behaves as the computed <a class="property" data-link-type="propdesc" href="#propdef-align-items" id="ref-for-propdef-align-items②">align-items</a> value of the parent box
(minus any <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy②">legacy</a> keywords)
otherwise
(including when determining the <em>static</em> position
of an absolutely positioned box).</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="align-self" data-dfn-type="value" data-export id="valdef-align-self-normal">normal</dfn>
    <dd data-md>
     <p>Represents the “default” alignment for the layout mode,
as defined below.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="align-self" data-dfn-type="value" data-export id="valdef-align-self-stretch">stretch</dfn>
    <dd data-md>
     <p>As defined for <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①④">justify-self</a> in <a href="#justify-self-property">§ 6.1 Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>.</p>
    <dt data-md><a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑥" title="Expands to: last | baseline | first">&lt;baseline-position></a>
    <dd data-md>
     <p>Indicates <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment④">baseline self-alignment</a>,
as defined in <a href="#baseline-values">§ 4.2 Baseline Alignment: the baseline keyword and first/last modifiers</a>, <a href="#baseline-align-self">§ 6.4 Baseline Self-Alignment</a>,
and <a href="#baseline-rules">§ 9 Baseline Alignment Details</a>.</p>
    <dt data-md><a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑦" title="Expands to: safe | unsafe">&lt;overflow-position></a>? <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position⑤" title="Expands to: end | center | flex-start | start | self-end | flex-end | self-start">&lt;self-position></a>
    <dd data-md>
     <p>Defined in <a href="#alignment-values">§ 4 Alignment Keywords</a>, above.</p>
   </dl>
   <p class="note" role="note"><span>Note:</span> <span class="css">auto</span> margins,
	because they effectively adjust the size of the margin area,
	take precedence over <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①⓪">align-self</a>.</p>
   <h4 class="heading settled" data-level="6.2.1" id="align-block"><span class="secno">6.2.1. </span><span class="content">Block-Level Boxes</span><a class="self-link" href="#align-block"></a></h4>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①①">align-self</a> property does not apply to block-level boxes
	(including floats),
	because there is more than one item in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①⓪">block axis</a>.</p>
   <h4 class="heading settled" data-level="6.2.2" id="align-abspos"><span class="secno">6.2.2. </span><span class="content">Absolutely-Positioned Boxes</span><a class="self-link" href="#align-abspos"></a></h4>
   <p>This section describes the effect of <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①②">align-self</a> on how the margin box of an absolutely-positioned box
	which is not statically-positioned
	is positioned with respect to its (absolute-positioning) containing block.</p>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①③">align-self</a> Axis 
      <td> The box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block⑤">containing block’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①①">block axis</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⑥">Alignment Container</a> 
      <td> The box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block⑥">containing block</a>,
				as modified by the inset properties
				(<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top①">top</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right①">right</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom①">bottom</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left①">left</a>),
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①③">writing mode</a> of the <span id="ref-for-containing-block⑦">containing block</span>.
				If both inset properties in the relevant axis are <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto⑤">auto</a>,
				then use the box’s <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle②">static position rectangle</a> (i.e. set both insets to the box’s <a data-link-type="dfn">static position</a>). 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥④">Alignment Subject</a> 
      <td> The box’s margin box,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①④">writing mode</a> of the box. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal①">normal</a> Behavior 
      <td>
       <ul>
        <li data-md>
         <p>For replaced absolutely-positioned boxes, the <a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal②">normal</a> keyword behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⑥">start</a>.</p>
        <li data-md>
         <p>For all other absolutely-positioned boxes, <a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal③">normal</a> behaves as stretch.
Additionally, if neither inset in this axis is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto⑥">auto</a>,
but <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width③">width</a> (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height③">height</a>, for <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode②">vertical writing modes</a>) is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto④">auto</a>, <span class="css">auto</span> margins are treated as zero.</p>
         <p>(In non-<a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal④">normal</a> cases, <span class="css">auto</span> margins are prioritized over the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties④">self-alignment properties</a>, as usual.)</p>
       </ul>
       <p class="note" role="note"><span>Note:</span> This somewhat bizarre behavior is required for compatibility with the behavior specified in CSS 2.1.</p>
     <tr>
      <th>Other Details 
      <td>
        In terms of CSS2.1 formatting <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>,
				the rules for "over-constrained" computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">section 10.6.4</a> are ignored in favor of alignment as specified here
				and the used value of the inset properties are not adjusted to correct for the over-constraint. 
       <p>Values other than <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch⑥">stretch</a> or <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑧">normal</a> cause <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a> to use <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fit-content-size" id="ref-for-fit-content-size①">fit-content sizing</a> for calculating <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑤">auto</a> sizes
				in the affected axis.</p>
       <p>Note that <a class="css" data-link-type="maybe" href="#valdef-justify-self-stretch" id="ref-for-valdef-justify-self-stretch⑦">stretch</a> does cause replaced absolutely-positioned boxes
				to fill their containing block
				just as non-replaced ones do.</p>
       <p class="note" role="note"><span>Note:</span> If only one inset property is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto⑦">auto</a>,
				the computations in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">CSS2 section 10.6.4</a> fully determine its size and position,
				and <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①④">align-self</a> has no effect.
				(If both are <span class="css" id="ref-for-valdef-top-auto⑧">auto</span>,
				then the box is statically-positioned,
				see above,
				and can be aligned within the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle③">static position rectangle</a>.)</p>
   </table>
   <h4 class="heading settled" data-level="6.2.3" id="align-cell"><span class="secno">6.2.3. </span><span class="content">Table Cells</span><a class="self-link" href="#align-cell"></a></h4>
   <p>This property does not apply to table cells,
	because their position and size is fully constrained by table layout.</p>
   <h4 class="heading settled" data-level="6.2.4" id="align-flex"><span class="secno">6.2.4. </span><span class="content">Flex Items</span><a class="self-link" href="#align-flex"></a></h4>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①⑤">align-self</a> Axis 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⓪">flex container’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis③">cross axis</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⑦">Alignment Container</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line②">flex line</a> the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑧">flex item</a> is in,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①⑤">writing mode</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①①">flex container</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑤">Alignment Subject</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item⑨">flex item’s</a> margin box,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①⑥">writing mode</a> of the <span id="ref-for-flex-item①⓪">flex item</span>. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal⑤">normal</a> Behavior 
      <td> Behaves as <a class="css" data-link-type="maybe" href="#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch①">stretch</a>. 
   </table>
   <p>See <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a> for details.</p>
   <h4 class="heading settled" data-level="6.2.5" id="align-grid"><span class="secno">6.2.5. </span><span class="content">Grid Items</span><a class="self-link" href="#align-grid"></a></h4>
   <table class="data align-details">
    <tbody>
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①⑥">align-self</a> Axis 
      <td> The grid’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①②">block axis</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⑧">Alignment Container</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item⑥">grid item’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-area" id="ref-for-grid-area①">grid area</a>,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①⑦">writing mode</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑤">grid container</a>. 
     <tr>
      <th><a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑥">Alignment Subject</a> 
      <td> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item⑦">grid item’s</a> margin box,
				assuming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①⑧">writing mode</a> of the <span id="ref-for-grid-item⑧">grid item</span>. 
     <tr>
      <th><a class="css" data-link-type="maybe" href="#valdef-align-self-normal" id="ref-for-valdef-align-self-normal⑥">normal</a> Behavior 
      <td> Behaves as <a class="css" data-link-type="maybe" href="#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch②">stretch</a> for non-replaced items.
				For replaced items,
				see <a href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">Grid Item Sizing</a> in <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a>. 
   </table>
   <h3 class="heading settled" data-level="6.3" id="place-self-property"><span class="secno">6.3. </span><span class="content"> Self-Alignment Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-place-self" id="ref-for-propdef-place-self①">place-self</a> property</span><a class="self-link" href="#place-self-property"></a></h3>
   <table class="def propdef" data-link-for-hint="place-self">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-place-self">place-self</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①⑦">&lt;'align-self'></a> <a class="production" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①⑤">&lt;'justify-self'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>block-level boxes, absolutely-positioned boxes, and grid items 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property①">shorthand property</a> sets
	both the <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self①⑧">align-self</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①⑥">justify-self</a> properties
	in a single declaration.
	The first value is assigned to <span class="property" id="ref-for-propdef-align-self①⑨">align-self</span>.
	The second value is assigned to <span class="property" id="ref-for-propdef-justify-self①⑦">justify-self</span>;
	if omitted, it is copied from the first value.</p>
   <h3 class="heading settled" data-level="6.4" id="baseline-align-self"><span class="secno">6.4. </span><span class="content"> Baseline Self-Alignment</span><a class="self-link" href="#baseline-align-self"></a></h3>
   <p>Boxes participating in row-like layout contexts (<a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context④">shared alignment contexts</a>)
	can be baseline-aligned to each other. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="baseline self-alignment|first-baseline self-alignment|last-baseline self-alignment" id="baseline-self-alignment">Baseline self-alignment</dfn> effectively increases the <strong>margins</strong> on the box
	to align its <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline④">alignment baseline</a> with that of other baseline-aligned boxes in its <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑤">baseline-sharing group</a>.</p>
   <p>The set of boxes that participate in <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑤">baseline self-alignment</a> depends on the layout model:</p>
   <dl>
    <dt>Flex Items: 
    <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item①①">flex item</a> participates in
			first/last <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑥">baseline self-alignment</a> in its flex line
			if its computed <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②⓪">align-self</a> is <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline⑨">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑥">last baseline</a>.
			See <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a> for details. 
    <dt>Grid Items: 
    <dd> A <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item⑨">grid item</a> participates in
			first/last <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑦">baseline self-alignment</a> in its startmost/endmost row or column
			if its <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②①">align-self</a> or <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①⑧">justify-self</a> property (respectively)
			computes to <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline①⓪">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑦">last baseline</a>. 
   </dl>
   <p>See <a href="#align-by-baseline">§ 9.3 Aligning Boxes by Baseline</a> for exact details. <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑧">Baseline self-alignment</a> can increase the intrinsic size contribution of the box.</p>
   <h3 class="heading settled" data-level="6.5" id="abspos-sizing"><span class="secno">6.5. </span><span class="content"> Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</span><a class="self-link" href="#abspos-sizing"></a></h3>
   <p>For absolutely-positioned boxes
	whose inline-axis offsets are both <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto⑨">auto</a>,
	the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available">available space</a> for calculating the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size">inline size</a> is also affected by alignment.</p>
   <p class="note" role="note"><span>Note:</span> In <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available①">available space</a> is keyed off of the the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> property
	of the <a data-link-type="dfn">static-position containing block</a>.
	(See <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a> and <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">CSS2§10.3.8</a>.)
	Fundamentally these rules set one of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①⓪">auto</a> insets
	(by default, the start-edge inset)
	to the corresponding edge of the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle④">static position rectangle</a> and the other to the corresponding edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block⑧">containing block</a> (i.e. set the inset to zero).
	Just as the <a data-link-type="dfn" href="#self-alignment-properties" id="ref-for-self-alignment-properties⑤">self-alignment properties</a> replace the <span id="ref-for-containing-block⑨">containing block</span>’s <span class="property" id="ref-for-propdef-direction①">direction</span> lookup for placement,
	they also replace this lookup for sizing,
	as specified here.</p>
   <p>Thus,
	when interpreting the rules in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a> and <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">CSS2§10.3.8</a>,
	wherever the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②">direction</a> property of the <a data-link-type="dfn">static-position containing block</a> is referenced,
	instead reference the value of the <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②②">align-self</a> or <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self①⑨">justify-self</a> property
	(whichever is defined to apply to the relevant axis),
	treating left-equivalent alignment as defined for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr">ltr</a> and right-equivalent alignment as defined for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl">rtl</a>.
	Treat <a class="css" data-link-type="maybe" href="#valdef-justify-self-normal" id="ref-for-valdef-justify-self-normal⑨">normal</a> as <a class="css" data-link-type="maybe" href="#valdef-self-position-start" id="ref-for-valdef-self-position-start②⑦">start</a> and any <a data-link-type="dfn" href="#distributed-alignment" id="ref-for-distributed-alignment①">distributed alignment</a> value as its <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①⑥">fallback alignment</a>.</p>
   <p>In the case of <span class="css">center</span> alignment,
	the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available②">available space</a> for the box is
	double the distance between the center of the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑤">static position rectangle</a> and the closest edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①⓪">containing block</a> in the relevant axis.</p>
   <figure>
     <img alt="Start alignment sizes into the space between
		          the start edge of the static-position rectangle and the end edge of the containing block.
		          End alignment sizes into the space between
		          the end edge of the static-position rectangle and the start edge of the containing block.
		          Center alignment sizes into the space between
		          the two edges of the static-position rectangle." height="330" src="images/place-content-abspos.svg" width="480"> 
    <figcaption> Instead of always sizing
			within the available space between
			the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start">inline-start</a> <a data-link-type="dfn">static position</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-end" id="ref-for-inline-end">inline-end</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①①">containing block</a> edge
			as specified in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>,
			an absolutely-positioned element with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①①">auto</a> insets
			will be sized with reference to
			the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑥">static position rectangle</a>’s edge(s) <em>most appropriate</em> to its specified <a data-link-type="dfn" href="#self-align" id="ref-for-self-align③">self-alignment</a>. </figcaption>
   </figure>
   <div class="example" id="example-d884518f"><a class="self-link" href="#example-d884518f"></a> For example,
		when the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①②">containing block</a>’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction③">direction</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr①">ltr</a> and its own <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self②⓪">justify-self</a> is <span class="css">end</span>,
		apply the rules for <span class="css" id="ref-for-propdef-direction④">direction: rtl</span>;
		when <span class="property" id="ref-for-propdef-direction⑤">direction</span> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl①">rtl</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content②③">justify-content</a> is <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between②">space-between</a>,
		apply the rules for <span class="css" id="ref-for-propdef-direction⑥">direction: rtl</span>;
		etc.
		For the case of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-flexbox-1/#valdef-justify-content-center" id="ref-for-valdef-justify-content-center">center</a> (or its equivalent),
		set both sides to match the <a data-link-type="dfn">static position</a>.
		The absolutely-positioned box is then sized into
		the resulting space (floored at zero). </div>
   <p class="note" role="note"><span>Note:</span> The <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②③">align-self</a>/<a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self②①">justify-self</a> properties
	can also modify additional aspects of sizing:
	for example, <span class="css" id="ref-for-propdef-justify-self②②">justify-self: stretch</span> will replace
	“shrink-to-fit” (<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fit-content-size" id="ref-for-fit-content-size②">fit-content</a>) sizing into the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available③">available space</a> with <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-size" id="ref-for-stretch-fit-size">stretch-fit sizing</a> (consuming all of the <span id="ref-for-available④">available space</span>).
	This is an independent effect from the available space adjustment here.</p>
   <p class="note" role="note"><span>Note:</span> This only affect how <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑤">available space</a> is calculated
	for sizing the absolutely-positioned box;
	its alignment is as specified in previous sections.</p>
   <h2 class="heading settled" data-level="7" id="default-alignment"><span class="secno">7. </span><span class="content"> Default Alignment</span><a class="self-link" href="#default-alignment"></a></h2>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-align-items" id="ref-for-propdef-align-items③">align-items</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items⑤">justify-items</a> properties
	(and their <a class="property" data-link-type="propdesc" href="#propdef-place-items" id="ref-for-propdef-place-items">place-items</a> shorthand)
	set the default <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②④">align-self</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self②③">justify-self</a> behavior of the element’s child boxes.</p>
   <div class="figure"> <img alt="Diagram showing that the alignment of grid items within the element is affected." height="212" src="images/items-example.svg" width="212"> </div>
   <h3 class="heading settled" data-level="7.1" id="justify-items-property"><span class="secno">7.1. </span><span class="content"> Inline-Axis (or Main-Axis) Alignment: the <a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items⑥">justify-items</a> property</span><a class="self-link" href="#justify-items-property"></a></h3>
   <table class="def propdef" data-link-for-hint="justify-items">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-justify-items">justify-items</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③②">|</a> stretch <span id="ref-for-comb-one③③">|</span> <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑦" title="Expands to: last | baseline | first">&lt;baseline-position></a> <span id="ref-for-comb-one③④">|</span> <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑧" title="Expands to: safe | unsafe">&lt;overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑦">?</a> [ <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position⑥" title="Expands to: end | center | flex-start | start | self-end | flex-end | self-start">&lt;self-position></a> <span id="ref-for-comb-one③⑤">|</span> left <span id="ref-for-comb-one③⑥">|</span> right ] <span id="ref-for-comb-one③⑦">|</span> legacy <span id="ref-for-comb-one③⑧">|</span> legacy <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all">&amp;&amp;</a> [ left <span id="ref-for-comb-one③⑨">|</span> right <span id="ref-for-comb-one④⓪">|</span> center ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>legacy 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s), except for <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy③">legacy</a> (see prose) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property specifies the default <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self②④">justify-self</a> for all of the child boxes
	(including anonymous boxes)
	participating in this box’s formatting context.
	Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="justify-items" data-dfn-type="value" data-export id="valdef-justify-items-legacy">legacy</dfn> 
    <dd>
      This keyword causes the value to effectively inherit into descendants. 
     <p>If the <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy④">legacy</a> keyword appears on its own
			(without an accompanying <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left⑥">left</a>, <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right⑥">right</a>, or <a class="css" data-link-type="maybe" href="#valdef-self-position-center" id="ref-for-valdef-self-position-center④">center</a> keyword):
			if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#inherited-value" id="ref-for-inherited-value">inherited value</a> of <span class="css">justify-items</span> includes the <span class="css" id="ref-for-valdef-justify-items-legacy⑤">legacy</span> keyword,
			this value computes to the <span id="ref-for-inherited-value①">inherited value</span>;
			otherwise it computes to <span class="css">normal</span>.</p>
     <p>When <span class="css">justify-self:auto</span> references the value of <a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items⑦">justify-items</a>,
			only the alignment keyword, not the <a class="css" data-link-type="maybe" href="#valdef-justify-items-legacy" id="ref-for-valdef-justify-items-legacy⑥">legacy</a> keyword, is referenced by it.
			It exists to implement the legacy alignment behavior of HTML’s <code>&lt;center></code> element and <code>align</code> attribute.</p>
   </dl>
   <p>Other values have no special handling and are merely referenced by <a class="property" data-link-type="propdesc" href="#propdef-justify-self" id="ref-for-propdef-justify-self②⑤">justify-self</a>.</p>
   <h3 class="heading settled" data-level="7.2" id="align-items-property"><span class="secno">7.2. </span><span class="content"> Block-Axis (or Cross-Axis) Alignment: the <a class="property" data-link-type="propdesc" href="#propdef-align-items" id="ref-for-propdef-align-items④">align-items</a> property</span><a class="self-link" href="#align-items-property"></a></h3>
   <table class="def propdef" data-link-for-hint="align-items">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-align-items">align-items</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④①">|</a> stretch <span id="ref-for-comb-one④②">|</span> <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑧" title="Expands to: last | baseline | first">&lt;baseline-position></a> <span id="ref-for-comb-one④③">|</span> [ <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position⑨" title="Expands to: safe | unsafe">&lt;overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑧">?</a> <a class="production css" data-link-type="type" href="#typedef-self-position" id="ref-for-typedef-self-position⑦" title="Expands to: end | center | flex-start | start | self-end | flex-end | self-start">&lt;self-position></a> ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property specifies the default <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②⑤">align-self</a> for all of the child boxes
	(including anonymous boxes)
	participating in this box’s formatting context.</p>
   <p>Values have no special handling and are merely referenced by <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②⑥">align-self</a>.</p>
   <h3 class="heading settled" data-level="7.3" id="place-items-property"><span class="secno">7.3. </span><span class="content"> Self-Alignment Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-place-items" id="ref-for-propdef-place-items①">place-items</a> property</span><a class="self-link" href="#place-items-property"></a></h3>
   <table class="def propdef" data-link-for-hint="place-items">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-place-items">place-items</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-align-items" id="ref-for-propdef-align-items⑤">&lt;'align-items'></a> <a class="production" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items⑧">&lt;'justify-items'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑨">?</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property②">shorthand property</a> sets
	both the <a class="property" data-link-type="propdesc" href="#propdef-align-items" id="ref-for-propdef-align-items⑥">align-items</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items⑨">justify-items</a> properties
	in a single declaration.
	The first value is assigned to <span class="property" id="ref-for-propdef-align-items⑦">align-items</span>.
	The second value is assigned to <span class="property" id="ref-for-propdef-justify-items①⓪">justify-items</span>;
	if omitted, it is copied from the first value.</p>
   <h2 class="heading settled" data-level="8" id="gaps"><span class="secno">8. </span><span class="content"> Gaps Between Boxes</span><a class="self-link" href="#gaps"></a></h2>
   <p>While <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin">margin</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding" id="ref-for-propdef-padding">padding</a> can be used to specify visual spacing around individual boxes,
it’s sometimes more convenient to globally specify spacing between adjacent boxes
within a given layout context,
particularly when the spacing is different between boxes
as opposed to between the first/last box and the container’s edge.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-gap" id="ref-for-propdef-gap">gap</a> property,
and its <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap">row-gap</a> and <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap">column-gap</a> sub-properties,
provide this functionality for <a href="http://www.w3.org/TR/css3-multicol/">multi-column</a>, <a href="http://www.w3.org/TR/css-flexbox/">flex</a>,
and <a href="http://www.w3.org/TR/css-grid/">grid layout</a>.</p>
   <h3 class="heading settled" data-level="8.1" id="column-row-gap"><span class="secno">8.1. </span><span class="content"> Row and Column Gutters: the <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap①">row-gap</a> and <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap①">column-gap</a> properties</span><a class="self-link" href="#column-row-gap"></a></h3>
   <table class="def propdef" data-link-for-hint="row-gap">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-gap">row-gap</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-gap">column-gap</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④④">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal 
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①②">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑥">grid containers</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to corresponding dimension of the content area 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword, else a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a> value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties specify fixed-length <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="gutter" id="gutter">gutters</dfn> between items in the container,
	adding space between them—<wbr>in a manner to the <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between③">space-between</a> keyword
	of the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties③">content-distribution properties</a>,
	but of a fixed size instead of as a fraction of remaining space.
	The <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap②">column-gap</a> property specifies spacing between “columns”,
	separating boxes in the container’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①③">inline axis</a> similar to <span id="ref-for-inline-axis①④">inline-axis</span> margin;
	while <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap②">row-gap</a> indicates spacing between “rows”,
	separating boxes in the container’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①③">block axis</a>.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②">&lt;length-percentage></a>
    <dd data-md>
     <p>Specifies a gap between “rows” or “columns”,
as defined by the layout modes to which it applies;
see subsections below for details.</p>
     <p>Negative values are invalid. <a href="https://www.w3.org/TR/css-sizing-3/#percentage-sizing">As in the min size properties and margins/paddings</a> <a data-link-type="biblio" href="#biblio-css-sizing-3">[CSS-SIZING-3]</a>,
percentages resolve against zero
for determining intrinsic size contributions,
but resolve against the box’s content box
when laying out the box’s contents.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="row-gap, column-gap, gap" data-dfn-type="value" data-export id="valdef-row-gap-normal">normal</dfn>
    <dd data-md>
     <p>The <a class="css" data-link-type="maybe" href="#valdef-row-gap-normal" id="ref-for-valdef-row-gap-normal">normal</a> represents
a used value of <span class="css">1em</span> on <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container②">multi-column containers</a>,
and a used value of <span class="css">0px</span> in all other contexts.</p>
   </dl>
   <p>Gutters effect a minimum spacing between items:
	additional spacing may be added by <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content②④">justify-content</a>/<a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content②②">align-content</a>.
	Such additional space effectively increases the size of these <a data-link-type="dfn" href="#gutter" id="ref-for-gutter①">gutters</a>.</p>
   <p>The exact handling of these properties varies by layout container:</p>
   <dl>
    <dt id="gap-multicol"><a class="self-link" href="#gap-multicol"></a><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container③">multi-column containers</a> 
    <dd> <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap③">column-gap</a> specifies the <a data-link-type="dfn" href="#gutter" id="ref-for-gutter②">gutter</a> between adjacent <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#column-box" id="ref-for-column-box">column boxes</a>.
			See <a data-link-type="biblio" href="#biblio-css-multicol-1">[CSS-MULTICOL-1]</a> for details on how this affects the layout of multicol elements. <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap③">row-gap</a> does not currently apply. 
    <dt id="gap-flex"><a class="self-link" href="#gap-flex"></a><a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①③">flex containers</a> 
    <dd>
      When applied to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis" id="ref-for-main-axis⑦">main axis</a> (e.g. <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap④">column-gap</a> in a <span class="css">row</span> <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①④">flex container</a>),
			indicates minimum spacing between items
			(as if an additional fixed-size margin were inserted
			between adjacent <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item①②">flex items</a> in a single line). 
     <p>When applied to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis" id="ref-for-cross-axis④">cross axis</a> (e.g. <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap④">row-gap</a> in a <span class="css">row</span> <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑤">flex container</a>),
			indicates minimum spacing between adjacent <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line" id="ref-for-flex-line③">flex lines</a>.</p>
    <dt id="gap-grid"><a class="self-link" href="#gap-grid"></a><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑦">grid containers</a> 
    <dd> The <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap⑤">row-gap</a> and <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap⑤">column-gap</a> properties,
			when specified on a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑧">grid container</a>,
			define the <a data-link-type="dfn" href="#gutter" id="ref-for-gutter③">gutters</a> between <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-row" id="ref-for-grid-row①">grid rows</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-column" id="ref-for-grid-column①">grid columns</a>,
			respectively.
			See <a href="https://www.w3.org/TR/css-grid-1/#gutters">CSS Grid Layout 1 §10.1 Gutters: the row-gap, column-gap, and gap properties</a> for precise details. 
   </dl>
   <p class="note" role="note"><span>Note:</span> Table boxes do not use the <a class="property" data-link-type="propdesc" href="#propdef-gap" id="ref-for-propdef-gap①">gap</a> properties
	to specify separation between their cells.
	Instead, they use the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-border-spacing" id="ref-for-propdef-border-spacing">border-spacing</a> property,
	which has slightly different functionality:
	it inherits,
	and it also specifies the additional spacing between the outermost cells
	and the border of the table
	(similar to <a class="css" data-link-type="maybe" href="#valdef-align-content-space-evenly" id="ref-for-valdef-align-content-space-evenly①">space-evenly</a> rather than <a class="css" data-link-type="maybe" href="#valdef-align-content-space-between" id="ref-for-valdef-align-content-space-between④">space-between</a>).</p>
   <h3 class="heading settled" data-level="8.2" id="gap-shorthand"><span class="secno">8.2. </span><span class="content"> Gap Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-gap" id="ref-for-propdef-gap②">gap</a> property</span><a class="self-link" href="#gap-shorthand"></a></h3>
   <table class="def propdef" data-link-for-hint="gap">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-gap">gap</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap⑥">&lt;'row-gap'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap⑥">&lt;'column-gap'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⓪">?</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container④">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑥">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑨">grid containers</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to corresponding dimension of the content area 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>This property is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property③">shorthand</a> that sets <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap⑦">row-gap</a> and <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap⑦">column-gap</a> in one declaration.
	If <span class="production" id="ref-for-propdef-column-gap⑧">&lt;'column-gap'></span> is omitted,
	it’s set to the same value as <span class="production" id="ref-for-propdef-row-gap⑧">&lt;'row-gap'></span>.</p>
   <div class="example" id="example-06510943">
    <a class="self-link" href="#example-06510943"></a> 
    <figure> <img alt="A diagram showing how margins and padding add to the visible gutter size" height="616" src="images/gutters-gaps.svg" width="500"> </figure>
    <p class="note" role="note"><span>Note:</span> The <a class="property" data-link-type="propdesc" href="#propdef-gap" id="ref-for-propdef-gap③">gap</a> property is only one component of the visible “gutter” or “alley” created between boxes.
		Margins, padding, or the use of distributed alignment
		may increase the visible separation between boxes
		beyond what is specified in <span class="property" id="ref-for-propdef-gap④">gap</span>.</p>
   </div>
   <h3 class="heading settled" data-level="8.3" id="gap-legacy"><span class="secno">8.3. </span><span class="content"> Legacy Gap Properties: the <a class="property" data-link-type="propdesc" href="#propdef-grid-row-gap" id="ref-for-propdef-grid-row-gap">grid-row-gap</a>, <a class="property" data-link-type="propdesc" href="#propdef-grid-column-gap" id="ref-for-propdef-grid-column-gap">grid-column-gap</a>, and <a class="property" data-link-type="propdesc" href="#propdef-grid-gap" id="ref-for-propdef-grid-gap">grid-gap</a> properties</span><a class="self-link" href="#gap-legacy"></a></h3>
   <p>The Grid Layout module was originally written with its own set of <a data-link-type="dfn" href="#gutter" id="ref-for-gutter④">gutter</a> properties,
	before all such properties were unified into the existing <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap⑨">row-gap</a>/<a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap⑨">column-gap</a> naming.
	For compatibility with legacy content,
	those legacy property names must be supported as aliases:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-grid-row-gap">grid-row-gap</dfn> must be treated as a shorthand for the <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap①⓪">row-gap</a> property</p>
    <li data-md>
     <p><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-grid-column-gap">grid-column-gap</dfn> must be treated as a shorthand for the <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap①⓪">column-gap</a> property</p>
    <li data-md>
     <p><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-grid-gap">grid-gap</dfn> must be treated as a shorthand for the <a class="property" data-link-type="propdesc" href="#propdef-gap" id="ref-for-propdef-gap⑤">gap</a> property</p>
   </ul>
   <p>In all three cases, the legacy properties must take the same grammar as the property they are aliasing,
	and just "forward" the value to their aliased property.</p>
   <h2 class="heading settled" data-level="9" id="baseline-rules"><span class="secno">9. </span><span class="content"> Baseline Alignment Details</span><a class="self-link" href="#baseline-rules"></a></h2>
   <p>Boxes in a <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑥">baseline-sharing group</a> are aligned to each other
	using their <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑤">alignment baselines</a>.
	For example, in horizontal writing modes,
	specifying <a class="css" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content②③">align-content: baseline</a> on table cells in the same row
	will align the baselines of their <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-3/#first-formatted-line0" id="ref-for-first-formatted-line0">first formatted lines</a>.
	This section defines exactly how baseline alignment is performed
	in consideration of the myriad baselines and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode①⑨">writing modes</a> that exist in internationalized modern CSS.</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-set">baseline set</dfn> is
	a set of baselines (alphabetic, central, etc.)
	associated with a common baseline table.
	Typically, a typesetting tradition will use only one of these,
	but different writing systems use different baselines,
	and mixing writing systems can result in using more than one
	within a single line.
	Refer to <a href="https://www.w3.org/TR/css-writing-modes-3/#intro-baselines">CSS Writing Modes 3 §4.1 Introduction to Baselines</a> for more information on baselines and writing modes.</p>
   <h3 class="heading settled" data-level="9.1" id="baseline-export"><span class="secno">9.1. </span><span class="content"> Determining the Baselines of a Box</span><a class="self-link" href="#baseline-export"></a></h3>
   <p>Each box,
	for a given axis,
	has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="first baseline set|first baselines" id="first-baseline-set">first baseline set</dfn> (and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="last baseline set|last baselines" id="last-baseline-set">last baseline set</dfn>)
	that nominally corresponds to the <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set">baseline set</a> of
	the first/last line of text within the box.
	The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="alignment-baseline">alignment baseline</dfn> is one of these,
	usually the dominant baseline associated with the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context⑤">shared alignment context</a>.
	(See the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline">dominant-baseline</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline">alignment-baseline</a> properties in <a data-link-type="biblio" href="#biblio-css-inline-3">[CSS-INLINE-3]</a>.)</p>
   <p>The first and last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set①">baseline sets</a> of a box
	are determined differently based on the layout model, as follows:</p>
   <dl>
    <dt>block containers 
    <dd>
      The first/last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set②">baseline set</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container④">block container</a> is <a data-link-type="dfn" href="#generate-baselines" id="ref-for-generate-baselines">generated</a> from the dominant first/last baseline
			of the first/last in-flow line box in the block container,
			or is taken from the first/last in-flow block-level child in the block container
			that contributes a set of first/last baselines,
			whichever comes first/last.
			If there is no such line box or child,
			then the block container has no <span id="ref-for-baseline-set③">baseline set</span>. 
     <p>However, for legacy reasons,
			if an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block①">inline-block</a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑧">scroll container</a> or contains no in-flow <a data-link-type="dfn" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="ref-for-line-box">line boxes</a>,
			its first and last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set④">baseline sets</a> are <a data-link-type="dfn" href="#synthesize-baseline" id="ref-for-synthesize-baseline">synthesized</a> from its <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#margin-box" id="ref-for-margin-box">margin box</a>.</p>
    <dt>multi-column containers 
    <dd>
      The first <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set⑤">baseline set</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑤">multi-column container</a> is <a data-link-type="dfn" href="#generate-baselines" id="ref-for-generate-baselines①">generated</a> from the dominant first baseline
			of the first in-flow line box in the first column box,
			or is taken from the first in-flow block-level child
			that contributes a set of first baselines,
			whichever comes first.
			If there is no such line box or child,
			then the multi-column container has no first <span id="ref-for-baseline-set⑥">baseline set</span>. 
     <p>Multi-column containers have no last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set⑦">baseline set</a>.</p>
    <dt>tables 
    <dd>
      The first/last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set⑧">baseline set</a> of a table box
			is the first/last <span id="ref-for-baseline-set⑨">baseline set</span> of its first/last row. 
     <p>When finding the first/last baseline set of an inline-block,
			any baselines contributed by table boxes must be skipped.
			(This quirk is a legacy behavior from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>.)</p>
    <dt>table rows 
    <dd> If any cells in the row participate in <a class="css" data-link-type="maybe" href="#valdef-justify-self-first-baseline" id="ref-for-valdef-justify-self-first-baseline①①">first baseline</a>/<a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑧">last baseline</a> alignment
			along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①⑤">inline axis</a>,
			the first/last <a data-link-type="dfn" href="#baseline-set" id="ref-for-baseline-set①⓪">baseline set</a> of the row
			is <a data-link-type="dfn" href="#generate-baselines" id="ref-for-generate-baselines②">generated</a> from their shared <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑥">alignment baseline</a> and the row’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-fonts-3/#first-available-font" id="ref-for-first-available-font">first available font</a>,
			after alignment has been performed.
			Otherwise, the first/last <span id="ref-for-baseline-set①①">baseline set</span> of the row
			is <a data-link-type="dfn" href="#synthesize-baseline" id="ref-for-synthesize-baseline①">synthesized</a> from the lowest and highest content edges of the cells in the row. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <dt>flex containers 
    <dd> See <a href="https://www.w3.org/TR/css3-flexbox/#flex-baselines">Flex Baselines</a> in <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a>. 
    <dt>grid containers 
    <dd> See <a href="https://www.w3.org/TR/css3-grid-layout/#grid-baselines">Grid Baselines</a> in <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a>. 
   </dl>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="generate|generated" id="generate-baselines">generate baselines</dfn> for a box from a single baseline,
	use the baseline table from the font settings and <a data-link-type="dfn" href="https://drafts.csswg.org/css-fonts-3/#first-available-font" id="ref-for-first-available-font①">first available font</a> of that box,
	and align that baseline set to the given single baseline.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="synthesize|synthesized" data-lt="synthesize baseline|synthesized baseline" id="synthesize-baseline">synthesize baselines</dfn> from a rectangle (or two parallel lines),
	synthesize the alphabetic baseline from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-under" id="ref-for-line-under">line-under</a> line,
	and the central baseline by averaging the positions of the two edges or lines.
	See <a href="https://www.w3.org/TR/css-inline-3/#baseline-synthesis">CSS Inline Layout 3 § Synthesizing Alignment Metrics</a> for rules on synthesizing additional baselines.</p>
   <p class="note" role="note"><span>Note:</span> The edges used to <a data-link-type="dfn" href="#synthesize-baseline" id="ref-for-synthesize-baseline②">synthesize</a> baselines from a box
	depend on their <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#formatting-context" id="ref-for-formatting-context">formatting context</a>:
	inline-level boxes <span id="ref-for-synthesize-baseline③">synthesize</span> from their margin edges <a data-link-type="biblio" href="#biblio-css-inline-3">[CSS-INLINE-3]</a>,
	table cells <span id="ref-for-synthesize-baseline④">synthesize</span> from their content edges <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>,
	and grid and flex items <span id="ref-for-synthesize-baseline⑤">synthesize</span> from their border edges <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a> <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a>.</p>
   <p>In general, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②⓪">writing mode</a> of the box, shape, or other object being aligned
	is used to determine the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-under" id="ref-for-line-under①">line-under</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-over" id="ref-for-line-over">line-over</a> edges for synthesis.
	However, when that <span id="ref-for-writing-mode②①">writing mode</span>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a> is parallel
	to the axis of the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context⑥">alignment context</a>,
	an axis-compatible <span id="ref-for-writing-mode②②">writing mode</span> must be assumed:</p>
   <ul>
    <li data-md>
     <p>If the box establishing the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context⑦">alignment context</a> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction①">block flow direction</a> that is orthogonal to the axis of the <span id="ref-for-shared-alignment-context⑧">alignment context</span>,
use its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode②③">writing mode</a>.</p>
    <li data-md>
     <p>Otherwise, assume either <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb">horizontal-tb</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr">vertical-lr</a> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a>,
whichever is orthogonal to the box’s own <span class="property" id="ref-for-propdef-writing-mode①">writing-mode</span>.</p>
   </ul>
   <p>For the purposes of finding the baselines of a box,
	it and all its in-flow descendants with a scrolling mechanism (see the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property)
	must be considered as if scrolled to their initial scroll position.
	Furthermore, if, in the case of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑨">scroll container</a> box,
	the resulting position of a first/last baseline
	is past a box’s end/start border edge,
	its position is clamped to that border edge.</p>
   <h3 class="heading settled" data-level="9.2" id="baseline-terms"><span class="secno">9.2. </span><span class="content"> Baseline Alignment Grouping</span><a class="self-link" href="#baseline-terms"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="baseline-sharing-group">baseline-sharing group</dfn> is composed of boxes that participate in baseline alignment together.
	This is possible only if they both:</p>
   <ul>
    <li>Share an <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context⑨">alignment context</a> along an axis perpendicular to the axis they’re being baseline-aligned in.
			(For example, grid items with <a class="css" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②⑦">align-self: baseline</a> are baseline-aligning along the grid’s block axis,
			and therefore participate with other items in their row.) 
    <li>Have <a data-link-type="dfn" href="#compatible-baseline-alignment-preferences" id="ref-for-compatible-baseline-alignment-preferences">compatible baseline alignment preferences</a> (i.e., the baselines that want to align are on the same side of the alignment context). 
   </ul>
   <p class="note" role="note"><span>Note:</span> Boxes participating in <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①①">baseline content-alignment</a> and
	boxes participating in <a data-link-type="dfn" href="#baseline-self-alignment" id="ref-for-baseline-self-alignment⑨">baseline self-alignment</a> can be part of the same <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑦">baseline-sharing group</a>,
	and can thus align to each other.
	The difference between the two methods
	is in where extra space is inserted to perform the alignment
	(inside or outside the box’s own border).</p>
   <p>Boxes share an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="shared alignment context|alignment context" id="shared-alignment-context">alignment context</dfn>,
	along a particular axis,
	and established by a particular box,
	when they are:</p>
   <ul>
    <li>table cells in the same row, along the table’s row (inline) axis, established by the row box 
    <li>grid items in the same row, along the grid’s row (inline) axis, established by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container①⓪">grid container</a> 
    <li>grid items in the same column, along the grid’s column (block) axis, established by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container①①">grid container</a> 
    <li>flex items in the same flex line, along the flex container’s main axis, established by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑦">flex container</a> 
   </ul>
   <p class="note" role="note"><span>Note:</span> Conceptually,
	the inline-level boxes in a line box also share a self-alignment context
	and participate in a baseline-sharing group;
	however they only baseline-align in response to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" id="ref-for-propdef-vertical-align③">vertical-align</a> property,
	not any of the properties defined in this module.
	See <a data-link-type="biblio" href="#biblio-css-inline-3">[CSS-INLINE-3]</a>.</p>
   <p>If a box spans multiple <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①⓪">shared alignment contexts</a>,
	then it participates in first/last baseline alignment
	within its start-most/end-most <span id="ref-for-shared-alignment-context①①">shared alignment context</span> along that axis.
	For example, a table cell spanning three rows
	participates in <a data-link-type="dfn" href="#first-baseline-alignment" id="ref-for-first-baseline-alignment">first-baseline alignment</a> with the table cells in the first row that it spans,
	or alternatively in <a data-link-type="dfn" href="#last-baseline-alignment" id="ref-for-last-baseline-alignment">last-baseline alignment</a> with the table cells in the last row that it spans.</p>
   <p>The <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference②">baseline alignment preferences</a> of two boxes in a <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑧">baseline-sharing group</a> are <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="compatible baseline alignment preferences" data-noexport id="compatible-baseline-alignment-preferences">compatible</dfn> if they have:</p>
   <ul>
    <li data-md>
     <p>the same <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction②">block flow direction</a> and same <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference③">baseline alignment preference</a></p>
    <li data-md>
     <p>opposite <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction③">block flow direction</a> and opposite <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference④">baseline alignment preference</a></p>
   </ul>
   <h3 class="heading settled" data-level="9.3" id="align-by-baseline"><span class="secno">9.3. </span><span class="content"> Aligning Boxes by Baseline</span><a class="self-link" href="#align-by-baseline"></a></h3>
   <p>Given a set of <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑦">alignment subjects</a> and their baselines
	that all belong to a single <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group⑨">baseline-sharing group</a>,
	the <span id="ref-for-alignment-subject⑥⑧">alignment subjects</span> are baseline-aligned as follows:</p>
   <p>First, generate the <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①⓪">baseline-sharing group</a>’s baseline table
	from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-fonts-3/#first-available-font" id="ref-for-first-available-font②">first available font</a> of the group’s <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①②">alignment context</a> and overlay also the mirror of this baseline table by aligning their central baselines.
	These are the baseline “grids” to which the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑥⑨">alignment subjects</a> will align.</p>
   <p>Next, align each <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦⓪">alignment subject</a> by its specified <a data-link-type="dfn" href="#alignment-baseline" id="ref-for-alignment-baseline⑦">alignment baseline</a> to the group’s baseline table
	or its mirror, whichever matches the <span id="ref-for-alignment-subject⑦①">alignment subject’s</span> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-orientation" id="ref-for-line-orientation">line orientation</a>.
	Unless otherwise specified (e.g. via the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline①">alignment-baseline</a> property),
	the <span id="ref-for-alignment-baseline⑧">alignment baseline</span> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#dominant-baseline" id="ref-for-dominant-baseline">dominant baseline</a> of the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①③">alignment context</a>.</p>
   <p>Position the aligned <a data-link-type="dfn" href="#baseline-sharing-group" id="ref-for-baseline-sharing-group①①">baseline-sharing group</a> within the <a data-link-type="dfn" href="#alignment-container" id="ref-for-alignment-container④⑨">alignment container</a> according to the <a data-link-type="dfn" href="#fallback-alignment" id="ref-for-fallback-alignment①⑦">fallback alignment</a> associated with the
	specified <a data-link-type="dfn" href="#baseline-alignment-preference" id="ref-for-baseline-alignment-preference⑤">baseline alignment preference</a>.
	For first/last <a data-link-type="dfn" href="#baseline-content-alignment" id="ref-for-baseline-content-alignment①②">baseline content-alignment</a>,
	then add the minimum necessary extra space
	between the <span id="ref-for-alignment-container⑤⓪">alignment container’s</span> start/end content edge
	and the <a data-link-type="dfn" href="#alignment-subject" id="ref-for-alignment-subject⑦②">alignment subject’s</a> edge
	to align the start/end margin edges of all the <span id="ref-for-alignment-container⑤①">alignment containers</span> in the <a data-link-type="dfn" href="#shared-alignment-context" id="ref-for-shared-alignment-context①④">alignment context</a> while maintaining baseline alignment within the <span id="ref-for-baseline-sharing-group①②">baseline-sharing group</span>.</p>
   <h2 class="heading settled" data-level="10" id="staticpos-rect"><span class="secno">10. </span><span class="content"> Appendix A: Static Position Terminology</span><a class="self-link" href="#staticpos-rect"></a></h2>
   <p>When both <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#inset-properties" id="ref-for-inset-properties">inset properties</a> in a given axis are <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①②">auto</a> on an <a href="https://www.w3.org/TR/CSS2/visuren.html#absolutely-positioned">absolutely positioned box</a>,
	CSS2 uses its <a data-link-type="dfn">static position</a> to resolve its size and position.
	See <a href="https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">CSS 2.1 §10.3.7 Absolutely positioned, non-replaced elements</a>.
	The <a data-link-type="dfn" href="#box-alignment-properties" id="ref-for-box-alignment-properties②">box alignment properties</a> modify these calculations,
	just as they do the sizing and positioning calculations in other layout modes.
	These modifications refer to a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="static-position-rectangle">static position rectangle</dfn>,
	whose edges represent the <span>static position</span> of the box
	from each side of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①③">containing block</a>.</p>
   <p>The <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑦">static position rectangle</a> and the <a data-link-type="dfn">static positions</a> to which it corresponds
	are defined by the layout model of its “hypothetical box”:</p>
   <dl>
    <dt>Block Layout 
    <dd> The <a data-link-type="dfn">static positions</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-level-box" id="ref-for-block-level-box">block-level box</a> are defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> Chapter 10.
		The <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑧">static position rectangle</a> is a zero-thickness rectangle spanning between
		the inline-axis sides of the box’s <span>static-position containing block</span> (see <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a>);
		and positioned at its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start">block-start</a> <span>static position</span> (see <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">CSS2§10.6.4</a>). 
    <dt>Inline Layout 
    <dd> The <a data-link-type="dfn">static positions</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level-box" id="ref-for-inline-level-box">inline-level box</a> are defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> Chapter 10.
		The <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle⑨">static position rectangle</a> is a zero-thickness rectangle spanning between
		the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-over" id="ref-for-line-over①">line-over</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-under" id="ref-for-line-under②">line-under</a> sides of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="ref-for-line-box①">line box</a> that would have contained its “hypothetical box”
		(see <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a>);
		and positioned at its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start①">inline-start</a> <span>static position</span>. 
    <dt>Flex Layout 
    <dd> The <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle①⓪">static position rectangle</a> of the child of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑧">flex container</a> corresponds to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#content-edge" id="ref-for-content-edge">content edges</a> of the <span id="ref-for-flex-container①⑨">flex container</span>.
		See <a href="https://www.w3.org/TR/css-flexbox-1/#abspos-items">static position of a grid container child</a> in <a data-link-type="biblio" href="#biblio-css-flexbox-1">[CSS-FLEXBOX-1]</a>. 
    <dt>Grid Layout 
    <dd> By default, the <a data-link-type="dfn" href="#static-position-rectangle" id="ref-for-static-position-rectangle①①">static position rectangle</a> of the child of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container①②">grid container</a> corresponds to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#content-edge" id="ref-for-content-edge①">content edges</a> of the <span id="ref-for-grid-container①③">grid container</span>.
		However, if that <span id="ref-for-grid-container①④">grid container</span> also establishes
		the box’s actual <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①④">containing block</a>,
		then the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-area" id="ref-for-grid-area②">grid area</a> specified by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-placement-property" id="ref-for-grid-placement-property">grid-placement properties</a> establishes its <span id="ref-for-static-position-rectangle①②">static position rectangle</span> instead.
		See the <a href="https://www.w3.org/TR/css-grid-1/#static-position">static position of a grid container child</a> in <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a>. 
   </dl>
   <h2 class="heading settled" data-level="11" id="changes"><span class="secno">11. </span><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>Changes since the <a href="https://www.w3.org/TR/2018/WD-css-align-3-20180830/">30 August 2018 Working Draft</a> consist of some minor clarifications.</p>
   <p>Changes since the <a href="https://www.w3.org/TR/2018/WD-css-align-3-20180423/">23 April 2018 Working Draft</a> include:</p>
   <ul>
    <li>Better definition of how the alignment properties interact with absolutely-positioned boxes with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-top-auto" id="ref-for-valdef-top-auto①③">auto</a> offsets.
		See <a href="#justify-abspos">§ 6.1.2 Absolutely-Positioned Boxes</a>, <a href="#align-abspos">§ 6.2.2 Absolutely-Positioned Boxes</a>, <a href="#abspos-sizing">§ 6.5 Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>, and <a href="#staticpos-rect">§ 10 Appendix A: Static Position Terminology</a>. 
    <li>More detailed definition of how the <a data-link-type="dfn" href="#content-distribution-properties" id="ref-for-content-distribution-properties④">content-distribution properties</a> work on <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①⓪">scroll containers</a>.
		See <a href="#overflow-scroll-position">§ 5.3 Overflow and Scroll Positions</a>. 
    <li>Noted CSS2’s special rules about the baselines of inline-block <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①①">scroll containers</a>. 
    <li>Defined that percentage gaps compute against zero when calculating intrinsic sizes, and resolve during layout. (<a href="https://github.com/w3c/csswg-drafts/issues/509">Issue 509</a>) 
    <li>Miscellaneous minor clarifications. 
   </ul>
   <p>Changes since the <a href="https://www.w3.org/TR/2017/WD-css-align-3-20170906/">6 September 2017 Working Draft</a> include:</p>
   <ul>
    <li>Added more illustrations! Many thanks to Melanie Richards for working through a difficult diagramming problem. 
    <li>Fixed errors in property definition table of <a class="property" data-link-type="propdesc" href="#propdef-gap" id="ref-for-propdef-gap⑥">gap</a> shorthand. 
    <li>Defining percentage gaps to resolve to zero when the containing block’s size depends on the gaps.
		(<a href="https://github.com/w3c/csswg-drafts/issues/509">Issue 509</a>, <a href="https://github.com/w3c/csswg-drafts/issues/2297">Issue 2297</a>) 
    <li>Fixed errors in handling <span class="css">left</span> and <span class="css">right</span> in the grammars. 
    <li>Fixed discrepancy in <span class="css">space-align</span> fallback alignment.
		(<a href="https://github.com/w3c/csswg-drafts/issues/2316">Issue 2316</a>) 
    <li>Tightened up handling of baseline alignment in cases where the box edges don’t align.
		(<a href="https://github.com/w3c/csswg-drafts/issues/1556">Issue 1556</a>, <a href="https://github.com/w3c/csswg-drafts/issues/1611">Issue 1611</a>) 
    <li>Miscellaneous clarifications. 
   </ul>
   <p>Changes since the <a href="https://www.w3.org/TR/2017/WD-css-align-3-20170720/#changes">20 July 2017 Working Draft</a> include:</p>
   <ul>
    <li>Added the <a class="property" data-link-type="propdesc" href="#propdef-row-gap" id="ref-for-propdef-row-gap①①">row-gap</a> and <a class="property" data-link-type="propdesc" href="#propdef-column-gap" id="ref-for-propdef-column-gap①①">column-gap</a> properties and <a class="property" data-link-type="propdesc" href="#propdef-gap" id="ref-for-propdef-gap⑦">gap</a> shorthand,
			applying them to both <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-layout" id="ref-for-grid-layout">grid layout</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-layout" id="ref-for-flex-layout">flex layout</a> to replace the grid-specific <a class="property" data-link-type="propdesc" href="#propdef-grid-row-gap" id="ref-for-propdef-grid-row-gap①">grid-row-gap</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-column-gap" id="ref-for-propdef-grid-column-gap①">grid-column-gap</a>/<a class="property" data-link-type="propdesc" href="#propdef-grid-gap" id="ref-for-propdef-grid-gap①">grid-gap</a> properties. 
   </ul>
   <p>Changes since the <a href="https://www.w3.org/TR/2017/WD-css-align-3-20170515/">15 May 2017 Working Draft</a> include:</p>
   <ul>
    <li>Dropped the <a class="css" data-link-type="maybe" href="#valdef-justify-content-left" id="ref-for-valdef-justify-content-left⑦">left</a> and <a class="css" data-link-type="maybe" href="#valdef-justify-content-right" id="ref-for-valdef-justify-content-right⑦">right</a> keywords from <a class="property" data-link-type="propdesc" href="#propdef-align-self" id="ref-for-propdef-align-self②⑧">align-self</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-content" id="ref-for-propdef-align-content②④">align-content</a>.
			They may be re-introduced in a later level if there is demand.
			(<a href="https://github.com/w3c/csswg-drafts/issues/1403">Issue 1403</a>) 
    <li>Assigned <a class="css" data-link-type="maybe" href="#valdef-self-position-end" id="ref-for-valdef-self-position-end①⑤">end</a> fallback alignment to <a class="css" data-link-type="maybe" href="#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch③">stretch</a> cases when combined with <a class="css" data-link-type="maybe" href="#valdef-justify-self-last-baseline" id="ref-for-valdef-justify-self-last-baseline⑨">last baseline</a> content-alignment. 
    <li>Disabled baseline alignment across cells in a table column,
			due to implementation complexity. 
    <li>A large number of minor corrections and clarifications <a href="https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue+label%3Acss-align-3+author%3Adbaron">reported by David Baron</a>. 
   </ul>
   <p>Changes since the <a href="https://www.w3.org/TR/2017/WD-css-align-3-20170407/">7 April 2017 Working Draft</a> include:</p>
   <ul>
    <li>Adding a section to clarify handling of partial implementations.
			(<a href="https://github.com/w3c/csswg-drafts/issues/1167">Issue 1167</a>) 
    <li>Dropped <a class="production css" data-link-type="type" href="#typedef-baseline-position" id="ref-for-typedef-baseline-position⑨" title="Expands to: last | baseline | first">&lt;baseline-position></a> value of <a class="property" data-link-type="propdesc" href="#propdef-justify-content" id="ref-for-propdef-justify-content②⑤">justify-content</a> since it can’t do anything anyway.
			(<a href="https://github.com/w3c/csswg-drafts/issues/1184">Issue 1184</a>) 
    <li>Deferred ability to specify fallback alignments to Level 4.
			(<a href="https://github.com/w3c/csswg-drafts/issues/1002#issuecomment-295143297">Issue 1002</a>) 
    <li>Fixed position of <a class="production css" data-link-type="type" href="#typedef-overflow-position" id="ref-for-typedef-overflow-position①⓪" title="Expands to: safe | unsafe">&lt;overflow-position></a> wrt <a class="production css" data-link-type="type" href="#typedef-content-position" id="ref-for-typedef-content-position④" title="Expands to: flex-start | flex-end | end | center | start">&lt;content-position></a>.
			(<a href="https://github.com/w3c/csswg-drafts/issues/1001">Issue 1001</a>) 
    <li>Fixed rules for handling baseline-aligned boxes being aligned along their block axis.
			(<a href="https://github.com/w3c/csswg-drafts/issues/1038">Issue 1038</a>) 
    <li>Renamed <a class="css" data-link-type="propdesc" href="#propdef-justify-items" id="ref-for-propdef-justify-items①①">justify-items: auto</a> to <span class="css" id="ref-for-propdef-justify-items①②">justify-items: legacy</span>.
			(<a href="https://github.com/w3c/csswg-drafts/issues/1318">Issue 1318</a>) 
    <li>Clamped baselines of scrollable boxes to the border edge, rather than margin edge.
			(<a href="https://github.com/w3c/csswg-drafts/issues/766">Issue 766</a>) 
   </ul>
   <h2 class="heading settled" data-level="12" id="privacy-security"><span class="secno">12. </span><span class="content"> Privacy and Security Considerations</span><a class="self-link" href="#privacy-security"></a></h2>
   <p>As a simple layout spec,
	this introduces no new privacy or security considerations.</p>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Special thanks goes to David Baron, Javier Fernandez, Markus Mielke, Alex Mogilevsky,
	and the participants in the CSSWG’s March 2008 F2F alignment discussions
	for their contributions to the alignment model described herein,
	and to Melanie Richards for her illustrations of the various <a href="#alignment-values">alignment keywords</a>.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#propdef-align-content">align-content</a><span>, in §5.1</span>
   <li><a href="#propdef-align-items">align-items</a><span>, in §7.2</span>
   <li><a href="#alignment-baseline">alignment baseline</a><span>, in §9.1</span>
   <li><a href="#alignment-container">alignment container</a><span>, in §3</span>
   <li><a href="#shared-alignment-context">alignment context</a><span>, in §9.2</span>
   <li><a href="#alignment-subject">alignment subject</a><span>, in §3</span>
   <li><a href="#propdef-align-self">align-self</a><span>, in §6.2</span>
   <li>
    auto
    <ul>
     <li><a href="#valdef-align-self-auto">value for align-self</a><span>, in §6.2</span>
     <li><a href="#valdef-justify-self-auto">value for justify-self</a><span>, in §6.1</span>
    </ul>
   <li><a href="#valdef-justify-self-baseline">baseline</a><span>, in §4.2</span>
   <li><a href="#baseline-alignment">Baseline alignment</a><span>, in §4.2</span>
   <li><a href="#baseline-alignment-preference">baseline alignment preference</a><span>, in §4.2</span>
   <li><a href="#baseline-content-alignment">baseline content-alignment</a><span>, in §5.4</span>
   <li><a href="#typedef-baseline-position">&lt;baseline-position></a><span>, in §4.2</span>
   <li><a href="#baseline-self-alignment">baseline self-alignment</a><span>, in §6.4</span>
   <li><a href="#baseline-set">baseline set</a><span>, in §9</span>
   <li><a href="#baseline-sharing-group">baseline-sharing group</a><span>, in §9.2</span>
   <li><a href="#box-alignment-properties">box alignment properties</a><span>, in §2</span>
   <li><a href="#valdef-self-position-center">center</a><span>, in §4.1</span>
   <li><a href="#propdef-column-gap">column-gap</a><span>, in §8.1</span>
   <li><a href="#compatible-baseline-alignment-preferences">compatible baseline alignment preferences</a><span>, in §9.2</span>
   <li><a href="#typedef-content-distribution">&lt;content-distribution></a><span>, in §4.3</span>
   <li><a href="#content-distribute">Content-distribution</a><span>, in §5</span>
   <li><a href="#content-distribution-properties">content-distribution properties</a><span>, in §5</span>
   <li><a href="#typedef-content-position">&lt;content-position></a><span>, in §4.1</span>
   <li><a href="#coordinated-self-alignment-preference">coordinated self-alignment preference</a><span>, in §5.4</span>
   <li><a href="#distributed-alignment">distributed alignment</a><span>, in §4.3</span>
   <li><a href="#valdef-self-position-end">end</a><span>, in §4.1</span>
   <li><a href="#fallback-alignment">fallback alignment</a><span>, in §3</span>
   <li><a href="#valdef-justify-self-first-baseline">first</a><span>, in §4.2</span>
   <li><a href="#valdef-justify-self-first-baseline">first baseline</a><span>, in §4.2</span>
   <li><a href="#first-baseline-alignment">first-baseline alignment</a><span>, in §4.2</span>
   <li><a href="#baseline-content-alignment">first-baseline content-alignment</a><span>, in §5.4</span>
   <li><a href="#first-baseline-set">first baselines</a><span>, in §9.1</span>
   <li><a href="#baseline-self-alignment">first-baseline self-alignment</a><span>, in §6.4</span>
   <li><a href="#first-baseline-set">first baseline set</a><span>, in §9.1</span>
   <li><a href="#valdef-self-position-flex-end">flex-end</a><span>, in §4.1</span>
   <li><a href="#valdef-self-position-flex-start">flex-start</a><span>, in §4.1</span>
   <li><a href="#propdef-gap">gap</a><span>, in §8.2</span>
   <li><a href="#generate-baselines">generate</a><span>, in §9.1</span>
   <li><a href="#generate-baselines">generate baselines</a><span>, in §9.1</span>
   <li><a href="#generate-baselines">generated</a><span>, in §9.1</span>
   <li><a href="#propdef-grid-column-gap">grid-column-gap</a><span>, in §8.3</span>
   <li><a href="#propdef-grid-gap">grid-gap</a><span>, in §8.3</span>
   <li><a href="#propdef-grid-row-gap">grid-row-gap</a><span>, in §8.3</span>
   <li><a href="#gutter">gutter</a><span>, in §8.1</span>
   <li><a href="#propdef-justify-content">justify-content</a><span>, in §5.1</span>
   <li><a href="#propdef-justify-items">justify-items</a><span>, in §7.1</span>
   <li><a href="#propdef-justify-self">justify-self</a><span>, in §6.1</span>
   <li><a href="#valdef-justify-self-last-baseline">last</a><span>, in §4.2</span>
   <li><a href="#valdef-justify-self-last-baseline">last baseline</a><span>, in §4.2</span>
   <li><a href="#last-baseline-alignment">last-baseline alignment</a><span>, in §4.2</span>
   <li><a href="#baseline-content-alignment">last-baseline content-alignment</a><span>, in §5.4</span>
   <li><a href="#last-baseline-set">last baselines</a><span>, in §9.1</span>
   <li><a href="#baseline-self-alignment">last-baseline self-alignment</a><span>, in §6.4</span>
   <li><a href="#last-baseline-set">last baseline set</a><span>, in §9.1</span>
   <li><a href="#valdef-justify-content-left">left</a><span>, in §4.1</span>
   <li><a href="#valdef-justify-items-legacy">legacy</a><span>, in §7.1</span>
   <li>
    normal
    <ul>
     <li><a href="#valdef-align-self-normal">value for align-self</a><span>, in §6.2</span>
     <li><a href="#valdef-justify-content-normal">value for justify-content, align-content</a><span>, in §5.1</span>
     <li><a href="#valdef-justify-self-normal">value for justify-self</a><span>, in §6.1</span>
     <li><a href="#valdef-row-gap-normal">value for row-gap, column-gap, gap</a><span>, in §8.1</span>
    </ul>
   <li><a href="#overflow-alignment">overflow alignment</a><span>, in §4.4</span>
   <li><a href="#typedef-overflow-position">&lt;overflow-position></a><span>, in §4.4</span>
   <li><a href="#propdef-place-content">place-content</a><span>, in §5.2</span>
   <li><a href="#propdef-place-items">place-items</a><span>, in §7.3</span>
   <li><a href="#propdef-place-self">place-self</a><span>, in §6.3</span>
   <li><a href="#positional-alignment">positional alignment</a><span>, in §4.1</span>
   <li><a href="#valdef-justify-content-right">right</a><span>, in §4.1</span>
   <li><a href="#propdef-row-gap">row-gap</a><span>, in §8.1</span>
   <li><a href="#valdef-overflow-position-safe">safe</a><span>, in §4.4</span>
   <li><a href="#self-align">Self-alignment</a><span>, in §6</span>
   <li><a href="#self-alignment-properties">self-alignment properties</a><span>, in §6</span>
   <li><a href="#valdef-self-position-self-end">self-end</a><span>, in §4.1</span>
   <li><a href="#typedef-self-position">&lt;self-position></a><span>, in §4.1</span>
   <li><a href="#valdef-self-position-self-start">self-start</a><span>, in §4.1</span>
   <li><a href="#shared-alignment-context">shared alignment context</a><span>, in §9.2</span>
   <li><a href="#valdef-align-content-space-around">space-around</a><span>, in §4.3</span>
   <li><a href="#valdef-align-content-space-between">space-between</a><span>, in §4.3</span>
   <li><a href="#valdef-align-content-space-evenly">space-evenly</a><span>, in §4.3</span>
   <li><a href="#valdef-self-position-start">start</a><span>, in §4.1</span>
   <li><a href="#static-position-rectangle">static position rectangle</a><span>, in §10</span>
   <li>
    stretch
    <ul>
     <li><a href="#valdef-align-content-stretch">value for align-content, justify-content, &lt;content-distribution></a><span>, in §4.3</span>
     <li><a href="#valdef-align-self-stretch">value for align-self</a><span>, in §6.2</span>
     <li><a href="#valdef-justify-self-stretch">value for justify-self</a><span>, in §6.1</span>
    </ul>
   <li><a href="#synthesize-baseline">synthesize</a><span>, in §9.1</span>
   <li><a href="#synthesize-baseline">synthesize baseline</a><span>, in §9.1</span>
   <li><a href="#synthesize-baseline">synthesized</a><span>, in §9.1</span>
   <li><a href="#synthesize-baseline">synthesized baseline</a><span>, in §9.1</span>
   <li><a href="#valdef-overflow-position-unsafe">unsafe</a><span>, in §4.4</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-content-edge">
   <a href="https://drafts.csswg.org/css-box-3/#content-edge">https://drafts.csswg.org/css-box-3/#content-edge</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-edge">10. 
Appendix A: Static Position Terminology</a> <a href="#ref-for-content-edge①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin">https://drafts.csswg.org/css-box-3/#propdef-margin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin">8. 
Gaps Between Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-margin-box">
   <a href="https://drafts.csswg.org/css-box-3/#margin-box">https://drafts.csswg.org/css-box-3/#margin-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-margin-box">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding">https://drafts.csswg.org/css-box-3/#propdef-padding</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding">8. 
Gaps Between Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inherited-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#inherited-value">https://drafts.csswg.org/css-cascade-4/#inherited-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inherited-value">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a> <a href="#ref-for-inherited-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shorthand-property">
   <a href="https://drafts.csswg.org/css-cascade-4/#shorthand-property">https://drafts.csswg.org/css-cascade-4/#shorthand-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shorthand-property">5.2. 
Content-Distribution Shorthand: the place-content property</a>
    <li><a href="#ref-for-shorthand-property①">6.3. 
Self-Alignment Shorthand: the place-self property</a>
    <li><a href="#ref-for-shorthand-property②">7.3. 
Self-Alignment Shorthand: the place-items property</a>
    <li><a href="#ref-for-shorthand-property③">8.2. 
Gap Shorthand: the gap property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shorthand-property">
   <a href="https://drafts.csswg.org/css-cascade-4/#shorthand-property">https://drafts.csswg.org/css-cascade-4/#shorthand-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shorthand-property">5.2. 
Content-Distribution Shorthand: the place-content property</a>
    <li><a href="#ref-for-shorthand-property①">6.3. 
Self-Alignment Shorthand: the place-self property</a>
    <li><a href="#ref-for-shorthand-property②">7.3. 
Self-Alignment Shorthand: the place-items property</a>
    <li><a href="#ref-for-shorthand-property③">8.2. 
Gap Shorthand: the gap property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-container">
   <a href="https://drafts.csswg.org/css-display-3/#block-container">https://drafts.csswg.org/css-display-3/#block-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-container">2. 
Overview of Alignment Properties</a> <a href="#ref-for-block-container①">(2)</a>
    <li><a href="#ref-for-block-container②">5.1.1. Block Containers (Including Table Cells)</a> <a href="#ref-for-block-container③">(2)</a>
    <li><a href="#ref-for-block-container④">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#block-formatting-context">https://drafts.csswg.org/css-display-3/#block-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-formatting-context">6.1.1. Block-Level Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-level-box">
   <a href="https://drafts.csswg.org/css-display-3/#block-level-box">https://drafts.csswg.org/css-display-3/#block-level-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-level-box">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#containing-block">https://drafts.csswg.org/css-display-3/#containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block">6.1.1. Block-Level Boxes</a> <a href="#ref-for-containing-block①">(2)</a> <a href="#ref-for-containing-block②">(3)</a>
    <li><a href="#ref-for-containing-block③">6.1.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-containing-block④">(2)</a>
    <li><a href="#ref-for-containing-block⑤">6.2.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-containing-block⑥">(2)</a> <a href="#ref-for-containing-block⑦">(3)</a>
    <li><a href="#ref-for-containing-block⑧">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-containing-block⑨">(2)</a> <a href="#ref-for-containing-block①⓪">(3)</a> <a href="#ref-for-containing-block①①">(4)</a> <a href="#ref-for-containing-block①②">(5)</a>
    <li><a href="#ref-for-containing-block①③">10. 
Appendix A: Static Position Terminology</a> <a href="#ref-for-containing-block①④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-establish-an-independent-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#establish-an-independent-formatting-context">https://drafts.csswg.org/css-display-3/#establish-an-independent-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-establish-an-independent-formatting-context">5.1.1. Block Containers (Including Table Cells)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#formatting-context">https://drafts.csswg.org/css-display-3/#formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-formatting-context">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-inline-block">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-block">https://drafts.csswg.org/css-display-3/#valdef-display-inline-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline-block">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-valdef-display-inline-block①">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-level-box">
   <a href="https://drafts.csswg.org/css-display-3/#inline-level-box">https://drafts.csswg.org/css-display-3/#inline-level-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-level-box">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-inline-table">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-table">https://drafts.csswg.org/css-display-3/#valdef-display-inline-table</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline-table">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-justify-content-center">
   <a href="https://drafts.csswg.org/css-flexbox-1/#valdef-justify-content-center">https://drafts.csswg.org/css-flexbox-1/#valdef-justify-content-center</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-content-center">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-flex-direction-column">
   <a href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column">https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-flex-direction-column">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-flex-direction-column-reverse">
   <a href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column-reverse">https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column-reverse</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-flex-direction-column-reverse">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cross-axis">
   <a href="https://drafts.csswg.org/css-flexbox-1/#cross-axis">https://drafts.csswg.org/css-flexbox-1/#cross-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cross-axis">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-cross-axis①">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-cross-axis②">5.1.3. Flex Containers</a>
    <li><a href="#ref-for-cross-axis③">6.2.4. Flex Items</a>
    <li><a href="#ref-for-cross-axis④">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-flex">
   <a href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex">https://drafts.csswg.org/css-flexbox-1/#propdef-flex</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-flex">5.1.3. Flex Containers</a>
    <li><a href="#ref-for-propdef-flex①">6.1.4. Flex Items</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-container">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-container">https://drafts.csswg.org/css-flexbox-1/#flex-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-container">2. 
Overview of Alignment Properties</a> <a href="#ref-for-flex-container①">(2)</a>
    <li><a href="#ref-for-flex-container②">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-flex-container③">(2)</a> <a href="#ref-for-flex-container④">(3)</a> <a href="#ref-for-flex-container⑤">(4)</a> <a href="#ref-for-flex-container⑥">(5)</a> <a href="#ref-for-flex-container⑦">(6)</a>
    <li><a href="#ref-for-flex-container⑧">5.1.3. Flex Containers</a>
    <li><a href="#ref-for-flex-container⑨">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-flex-container①⓪">6.2.4. Flex Items</a> <a href="#ref-for-flex-container①①">(2)</a>
    <li><a href="#ref-for-flex-container①②">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-flex-container①③">(2)</a> <a href="#ref-for-flex-container①④">(3)</a> <a href="#ref-for-flex-container①⑤">(4)</a>
    <li><a href="#ref-for-flex-container①⑥">8.2. 
Gap Shorthand: the gap property</a>
    <li><a href="#ref-for-flex-container①⑦">9.2. 
Baseline Alignment Grouping</a>
    <li><a href="#ref-for-flex-container①⑧">10. 
Appendix A: Static Position Terminology</a> <a href="#ref-for-flex-container①⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-formatting-context">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context">https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-formatting-context">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-flex-formatting-context①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-item">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-item">https://drafts.csswg.org/css-flexbox-1/#flex-item</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-item">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-flex-item①">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-flex-item②">(2)</a> <a href="#ref-for-flex-item③">(3)</a> <a href="#ref-for-flex-item④">(4)</a>
    <li><a href="#ref-for-flex-item⑤">5.1.3. Flex Containers</a>
    <li><a href="#ref-for-flex-item⑥">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-flex-item⑦">6.1.4. Flex Items</a>
    <li><a href="#ref-for-flex-item⑧">6.2.4. Flex Items</a> <a href="#ref-for-flex-item⑨">(2)</a> <a href="#ref-for-flex-item①⓪">(3)</a>
    <li><a href="#ref-for-flex-item①①">6.4. 
Baseline Self-Alignment</a>
    <li><a href="#ref-for-flex-item①②">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-layout">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-layout">https://drafts.csswg.org/css-flexbox-1/#flex-layout</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-layout">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-line">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-line">https://drafts.csswg.org/css-flexbox-1/#flex-line</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-line">5.1.3. Flex Containers</a> <a href="#ref-for-flex-line①">(2)</a>
    <li><a href="#ref-for-flex-line②">6.2.4. Flex Items</a>
    <li><a href="#ref-for-flex-line③">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-flex-direction">
   <a href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction">https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-flex-direction">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-propdef-flex-direction①">(2)</a> <a href="#ref-for-propdef-flex-direction②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-flex-flow">
   <a href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow">https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-flex-flow">5.3. 
Overflow and Scroll Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-main-axis">
   <a href="https://drafts.csswg.org/css-flexbox-1/#main-axis">https://drafts.csswg.org/css-flexbox-1/#main-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-main-axis">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-main-axis①">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-main-axis②">5.1.3. Flex Containers</a> <a href="#ref-for-main-axis③">(2)</a>
    <li><a href="#ref-for-main-axis④">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-main-axis⑤">6.1.4. Flex Items</a> <a href="#ref-for-main-axis⑥">(2)</a>
    <li><a href="#ref-for-main-axis⑦">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-main-axis">
   <a href="https://drafts.csswg.org/css-flexbox-1/#main-axis">https://drafts.csswg.org/css-flexbox-1/#main-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-main-axis">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-main-axis①">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-main-axis②">5.1.3. Flex Containers</a> <a href="#ref-for-main-axis③">(2)</a>
    <li><a href="#ref-for-main-axis④">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-main-axis⑤">6.1.4. Flex Items</a> <a href="#ref-for-main-axis⑥">(2)</a>
    <li><a href="#ref-for-main-axis⑦">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-multi-line-flex-container">
   <a href="https://drafts.csswg.org/css-flexbox-1/#multi-line-flex-container">https://drafts.csswg.org/css-flexbox-1/#multi-line-flex-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-multi-line-flex-container">5.1.3. Flex Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-flex-direction-row">
   <a href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row">https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-flex-direction-row">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-flex-direction-row-reverse">
   <a href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row-reverse">https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-row-reverse</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-flex-direction-row-reverse">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-first-available-font">
   <a href="https://drafts.csswg.org/css-fonts-3/#first-available-font">https://drafts.csswg.org/css-fonts-3/#first-available-font</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-first-available-font">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-first-available-font①">(2)</a>
    <li><a href="#ref-for-first-available-font②">9.3. 
Aligning Boxes by Baseline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-collapsed-gutter">
   <a href="https://drafts.csswg.org/css-grid-1/#collapsed-gutter">https://drafts.csswg.org/css-grid-1/#collapsed-gutter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-collapsed-gutter">5.1.4. Grid Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-area">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-area">https://drafts.csswg.org/css-grid-1/#grid-area</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-area">6.1.5. Grid Items</a>
    <li><a href="#ref-for-grid-area①">6.2.5. Grid Items</a>
    <li><a href="#ref-for-grid-area②">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-column">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-column">https://drafts.csswg.org/css-grid-1/#grid-column</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-column">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-grid-column①">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-container">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-container">https://drafts.csswg.org/css-grid-1/#grid-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-container">2. 
Overview of Alignment Properties</a> <a href="#ref-for-grid-container①">(2)</a> <a href="#ref-for-grid-container②">(3)</a>
    <li><a href="#ref-for-grid-container③">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-grid-container④">6.1.5. Grid Items</a>
    <li><a href="#ref-for-grid-container⑤">6.2.5. Grid Items</a>
    <li><a href="#ref-for-grid-container⑥">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-grid-container⑦">(2)</a> <a href="#ref-for-grid-container⑧">(3)</a>
    <li><a href="#ref-for-grid-container⑨">8.2. 
Gap Shorthand: the gap property</a>
    <li><a href="#ref-for-grid-container①⓪">9.2. 
Baseline Alignment Grouping</a> <a href="#ref-for-grid-container①①">(2)</a>
    <li><a href="#ref-for-grid-container①②">10. 
Appendix A: Static Position Terminology</a> <a href="#ref-for-grid-container①③">(2)</a> <a href="#ref-for-grid-container①④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-item">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-item">https://drafts.csswg.org/css-grid-1/#grid-item</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-item">2. 
Overview of Alignment Properties</a> <a href="#ref-for-grid-item①">(2)</a>
    <li><a href="#ref-for-grid-item②">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-grid-item③">6.1.5. Grid Items</a> <a href="#ref-for-grid-item④">(2)</a> <a href="#ref-for-grid-item⑤">(3)</a>
    <li><a href="#ref-for-grid-item⑥">6.2.5. Grid Items</a> <a href="#ref-for-grid-item⑦">(2)</a> <a href="#ref-for-grid-item⑧">(3)</a>
    <li><a href="#ref-for-grid-item⑨">6.4. 
Baseline Self-Alignment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-layout">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-layout">https://drafts.csswg.org/css-grid-1/#grid-layout</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-layout">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-row">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-row">https://drafts.csswg.org/css-grid-1/#grid-row</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-row">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-grid-row①">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-track">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-track">https://drafts.csswg.org/css-grid-1/#grid-track</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-track">5.1.4. Grid Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-placement-property">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-placement-property">https://drafts.csswg.org/css-grid-1/#grid-placement-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-placement-property">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-alignment-baseline">
   <a href="https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline">https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-alignment-baseline">9.1. 
Determining the Baselines of a Box</a>
    <li><a href="#ref-for-propdef-alignment-baseline①">9.3. 
Aligning Boxes by Baseline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-dominant-baseline">
   <a href="https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline">https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-dominant-baseline">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inset-properties">
   <a href="https://drafts.csswg.org/css-logical-1/#inset-properties">https://drafts.csswg.org/css-logical-1/#inset-properties</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inset-properties">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-column-width-auto">
   <a href="https://drafts.csswg.org/css-multicol-1/#valdef-column-width-auto">https://drafts.csswg.org/css-multicol-1/#valdef-column-width-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-column-width-auto">5.1.2. Multicol Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-column-box">
   <a href="https://drafts.csswg.org/css-multicol-1/#column-box">https://drafts.csswg.org/css-multicol-1/#column-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-column-box">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-column-width">
   <a href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width">https://drafts.csswg.org/css-multicol-1/#propdef-column-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-column-width">5.1.2. Multicol Containers</a> <a href="#ref-for-propdef-column-width①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-multi-column-container">
   <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-container">https://drafts.csswg.org/css-multicol-1/#multi-column-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-multi-column-container">5.1.2. Multicol Containers</a>
    <li><a href="#ref-for-multi-column-container①">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-multi-column-container②">(2)</a> <a href="#ref-for-multi-column-container③">(3)</a>
    <li><a href="#ref-for-multi-column-container④">8.2. 
Gap Shorthand: the gap property</a>
    <li><a href="#ref-for-multi-column-container⑤">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-initial-scroll-position">
   <a href="https://drafts.csswg.org/css-overflow-3/#initial-scroll-position">https://drafts.csswg.org/css-overflow-3/#initial-scroll-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initial-scroll-position">5.3. 
Overflow and Scroll Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scroll-container">
   <a href="https://drafts.csswg.org/css-overflow-3/#scroll-container">https://drafts.csswg.org/css-overflow-3/#scroll-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-container">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a>
    <li><a href="#ref-for-scroll-container①">5.3. 
Overflow and Scroll Positions</a> <a href="#ref-for-scroll-container②">(2)</a> <a href="#ref-for-scroll-container③">(3)</a> <a href="#ref-for-scroll-container④">(4)</a> <a href="#ref-for-scroll-container⑤">(5)</a> <a href="#ref-for-scroll-container⑥">(6)</a> <a href="#ref-for-scroll-container⑦">(7)</a>
    <li><a href="#ref-for-scroll-container⑧">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-scroll-container⑨">(2)</a>
    <li><a href="#ref-for-scroll-container①⓪">11. 
Changes</a> <a href="#ref-for-scroll-container①①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scrollable-overflow-region">
   <a href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region">https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrollable-overflow-region">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a>
    <li><a href="#ref-for-scrollable-overflow-region①">5.3. 
Overflow and Scroll Positions</a> <a href="#ref-for-scrollable-overflow-region②">(2)</a> <a href="#ref-for-scrollable-overflow-region③">(3)</a> <a href="#ref-for-scrollable-overflow-region④">(4)</a> <a href="#ref-for-scrollable-overflow-region⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scrollport">
   <a href="https://drafts.csswg.org/css-overflow-3/#scrollport">https://drafts.csswg.org/css-overflow-3/#scrollport</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrollport">5.3. 
Overflow and Scroll Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-top-auto">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-top-auto">https://drafts.csswg.org/css-position-3/#valdef-top-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-top-auto①">6.1.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-valdef-top-auto②">(2)</a> <a href="#ref-for-valdef-top-auto③">(3)</a> <a href="#ref-for-valdef-top-auto④">(4)</a>
    <li><a href="#ref-for-valdef-top-auto⑤">6.2.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-valdef-top-auto⑥">(2)</a> <a href="#ref-for-valdef-top-auto⑦">(3)</a> <a href="#ref-for-valdef-top-auto⑧">(4)</a>
    <li><a href="#ref-for-valdef-top-auto⑨">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-valdef-top-auto①⓪">(2)</a> <a href="#ref-for-valdef-top-auto①①">(3)</a>
    <li><a href="#ref-for-valdef-top-auto①②">10. 
Appendix A: Static Position Terminology</a>
    <li><a href="#ref-for-valdef-top-auto①③">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-bottom">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-bottom">https://drafts.csswg.org/css-position-3/#propdef-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-bottom">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-propdef-bottom①">6.2.2. Absolutely-Positioned Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-left">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-left">https://drafts.csswg.org/css-position-3/#propdef-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-left">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-propdef-left①">6.2.2. Absolutely-Positioned Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-right">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-right">https://drafts.csswg.org/css-position-3/#propdef-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-right">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-propdef-right①">6.2.2. Absolutely-Positioned Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-top">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-top">https://drafts.csswg.org/css-position-3/#propdef-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-top">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-propdef-top①">6.2.2. Absolutely-Positioned Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-width-auto">
   <a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">https://drafts.csswg.org/css-sizing-3/#valdef-width-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-width-auto">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-valdef-width-auto①">(2)</a>
    <li><a href="#ref-for-valdef-width-auto②">6.1.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-valdef-width-auto③">(2)</a>
    <li><a href="#ref-for-valdef-width-auto④">6.2.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-valdef-width-auto⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-available">
   <a href="https://drafts.csswg.org/css-sizing-3/#available">https://drafts.csswg.org/css-sizing-3/#available</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-available">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-available①">(2)</a> <a href="#ref-for-available②">(3)</a> <a href="#ref-for-available③">(4)</a> <a href="#ref-for-available④">(5)</a> <a href="#ref-for-available⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fit-content-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#fit-content-size">https://drafts.csswg.org/css-sizing-3/#fit-content-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fit-content-size">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-fit-content-size①">6.2.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-fit-content-size②">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stretch-fit-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-size">https://drafts.csswg.org/css-sizing-3/#stretch-fit-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stretch-fit-size">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-align">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-align">https://drafts.csswg.org/css-text-3/#propdef-text-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-align">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-all">
   <a href="https://drafts.csswg.org/css-values-4/#comb-all">https://drafts.csswg.org/css-values-4/#comb-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-all">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-typedef-length-percentage①">(2)</a> <a href="#ref-for-typedef-length-percentage②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-mult-opt①">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-mult-opt②">(2)</a>
    <li><a href="#ref-for-mult-opt③">5.2. 
Content-Distribution Shorthand: the place-content property</a>
    <li><a href="#ref-for-mult-opt④">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
    <li><a href="#ref-for-mult-opt⑤">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a>
    <li><a href="#ref-for-mult-opt⑥">6.3. 
Self-Alignment Shorthand: the place-self property</a>
    <li><a href="#ref-for-mult-opt⑦">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a>
    <li><a href="#ref-for-mult-opt⑧">7.2. 
Block-Axis (or Cross-Axis) Alignment: the align-items property</a>
    <li><a href="#ref-for-mult-opt⑨">7.3. 
Self-Alignment Shorthand: the place-items property</a>
    <li><a href="#ref-for-mult-opt①⓪">8.2. 
Gap Shorthand: the gap property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-wide-keywords">
   <a href="https://drafts.csswg.org/css-values-4/#css-wide-keywords">https://drafts.csswg.org/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">1.2. 
Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a> <a href="#ref-for-comb-one④">(5)</a> <a href="#ref-for-comb-one⑤">(6)</a> <a href="#ref-for-comb-one⑥">(7)</a> <a href="#ref-for-comb-one⑦">(8)</a> <a href="#ref-for-comb-one⑧">(9)</a> <a href="#ref-for-comb-one⑨">(10)</a>
    <li><a href="#ref-for-comb-one①⓪">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-comb-one①①">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a> <a href="#ref-for-comb-one①②">(2)</a> <a href="#ref-for-comb-one①③">(3)</a>
    <li><a href="#ref-for-comb-one①④">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a>
    <li><a href="#ref-for-comb-one①⑤">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-comb-one①⑥">(2)</a> <a href="#ref-for-comb-one①⑦">(3)</a> <a href="#ref-for-comb-one①⑧">(4)</a> <a href="#ref-for-comb-one①⑨">(5)</a> <a href="#ref-for-comb-one②⓪">(6)</a> <a href="#ref-for-comb-one②①">(7)</a>
    <li><a href="#ref-for-comb-one②②">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-comb-one②③">(2)</a> <a href="#ref-for-comb-one②④">(3)</a> <a href="#ref-for-comb-one②⑤">(4)</a> <a href="#ref-for-comb-one②⑥">(5)</a> <a href="#ref-for-comb-one②⑦">(6)</a>
    <li><a href="#ref-for-comb-one②⑧">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a> <a href="#ref-for-comb-one②⑨">(2)</a> <a href="#ref-for-comb-one③⓪">(3)</a> <a href="#ref-for-comb-one③①">(4)</a>
    <li><a href="#ref-for-comb-one③②">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a> <a href="#ref-for-comb-one③③">(2)</a> <a href="#ref-for-comb-one③④">(3)</a> <a href="#ref-for-comb-one③⑤">(4)</a> <a href="#ref-for-comb-one③⑥">(5)</a> <a href="#ref-for-comb-one③⑦">(6)</a> <a href="#ref-for-comb-one③⑧">(7)</a> <a href="#ref-for-comb-one③⑨">(8)</a> <a href="#ref-for-comb-one④⓪">(9)</a>
    <li><a href="#ref-for-comb-one④①">7.2. 
Block-Axis (or Cross-Axis) Alignment: the align-items property</a> <a href="#ref-for-comb-one④②">(2)</a> <a href="#ref-for-comb-one④③">(3)</a>
    <li><a href="#ref-for-comb-one④④">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-direction">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">https://drafts.csswg.org/css-writing-modes-3/#propdef-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-direction">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-propdef-direction①">(2)</a> <a href="#ref-for-propdef-direction②">(3)</a> <a href="#ref-for-propdef-direction③">(4)</a> <a href="#ref-for-propdef-direction④">(5)</a> <a href="#ref-for-propdef-direction⑤">(6)</a> <a href="#ref-for-propdef-direction⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dominant-baseline">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#dominant-baseline">https://drafts.csswg.org/css-writing-modes-3/#dominant-baseline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dominant-baseline">9.3. 
Aligning Boxes by Baseline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-axis">https://drafts.csswg.org/css-writing-modes-4/#block-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-axis">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-block-axis①">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-block-axis②">(2)</a> <a href="#ref-for-block-axis③">(3)</a> <a href="#ref-for-block-axis④">(4)</a> <a href="#ref-for-block-axis⑤">(5)</a>
    <li><a href="#ref-for-block-axis⑥">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-block-axis⑦">5.1.2. Multicol Containers</a>
    <li><a href="#ref-for-block-axis⑧">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-block-axis⑨">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-block-axis①⓪">6.2.1. Block-Level Boxes</a>
    <li><a href="#ref-for-block-axis①①">6.2.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-block-axis①②">6.2.5. Grid Items</a>
    <li><a href="#ref-for-block-axis①③">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-flow-direction">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction">https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-flow-direction">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-block-flow-direction①">(2)</a>
    <li><a href="#ref-for-block-flow-direction②">9.2. 
Baseline Alignment Grouping</a> <a href="#ref-for-block-flow-direction③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-start">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-start">https://drafts.csswg.org/css-writing-modes-4/#block-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-start">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flow-relative">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative">https://drafts.csswg.org/css-writing-modes-4/#flow-relative</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flow-relative">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-flow-relative①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-writing-mode-horizontal-tb">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb">https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis">https://drafts.csswg.org/css-writing-modes-4/#inline-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-axis">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-inline-axis①">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-inline-axis②">(2)</a> <a href="#ref-for-inline-axis③">(3)</a> <a href="#ref-for-inline-axis④">(4)</a> <a href="#ref-for-inline-axis⑤">(5)</a>
    <li><a href="#ref-for-inline-axis⑥">5.1.2. Multicol Containers</a>
    <li><a href="#ref-for-inline-axis⑦">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-inline-axis⑧">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-inline-axis⑨">(2)</a>
    <li><a href="#ref-for-inline-axis①⓪">6.1.1. Block-Level Boxes</a>
    <li><a href="#ref-for-inline-axis①①">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-inline-axis①②">6.1.5. Grid Items</a>
    <li><a href="#ref-for-inline-axis①③">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-inline-axis①④">(2)</a>
    <li><a href="#ref-for-inline-axis①⑤">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-size">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-size">https://drafts.csswg.org/css-writing-modes-4/#inline-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-size">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis">https://drafts.csswg.org/css-writing-modes-4/#inline-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-axis">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-inline-axis①">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-inline-axis②">(2)</a> <a href="#ref-for-inline-axis③">(3)</a> <a href="#ref-for-inline-axis④">(4)</a> <a href="#ref-for-inline-axis⑤">(5)</a>
    <li><a href="#ref-for-inline-axis⑥">5.1.2. Multicol Containers</a>
    <li><a href="#ref-for-inline-axis⑦">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-inline-axis⑧">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-inline-axis⑨">(2)</a>
    <li><a href="#ref-for-inline-axis①⓪">6.1.1. Block-Level Boxes</a>
    <li><a href="#ref-for-inline-axis①①">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-inline-axis①②">6.1.5. Grid Items</a>
    <li><a href="#ref-for-inline-axis①③">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-inline-axis①④">(2)</a>
    <li><a href="#ref-for-inline-axis①⑤">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-end">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-end">https://drafts.csswg.org/css-writing-modes-4/#inline-end</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-end">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-start">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-start">https://drafts.csswg.org/css-writing-modes-4/#inline-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-start">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
    <li><a href="#ref-for-inline-start①">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-line-orientation">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#line-orientation">https://drafts.csswg.org/css-writing-modes-4/#line-orientation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-orientation">9.3. 
Aligning Boxes by Baseline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-line-left">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#line-left">https://drafts.csswg.org/css-writing-modes-4/#line-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-left">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-line-over">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#line-over">https://drafts.csswg.org/css-writing-modes-4/#line-over</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-over">9.1. 
Determining the Baselines of a Box</a>
    <li><a href="#ref-for-line-over①">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-line-right">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#line-right">https://drafts.csswg.org/css-writing-modes-4/#line-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-right">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-line-under">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#line-under">https://drafts.csswg.org/css-writing-modes-4/#line-under</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-under">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-line-under①">(2)</a>
    <li><a href="#ref-for-line-under②">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-direction-ltr">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr">https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-direction-ltr">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-valdef-direction-ltr①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-physical-left">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#physical-left">https://drafts.csswg.org/css-writing-modes-4/#physical-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-physical-left">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-physical-right">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#physical-right">https://drafts.csswg.org/css-writing-modes-4/#physical-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-physical-right">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-direction-rtl">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl">https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-direction-rtl">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-valdef-direction-rtl①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-vertical-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vertical-writing-mode">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-vertical-writing-mode①">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-vertical-writing-mode②">6.2.2. Absolutely-Positioned Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-writing-mode-vertical-lr">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr">https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-vertical-lr</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode">https://drafts.csswg.org/css-writing-modes-4/#writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-writing-mode">3. 
Alignment Terminology</a> <a href="#ref-for-writing-mode①">(2)</a> <a href="#ref-for-writing-mode②">(3)</a>
    <li><a href="#ref-for-writing-mode③">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-writing-mode④">(2)</a> <a href="#ref-for-writing-mode⑤">(3)</a>
    <li><a href="#ref-for-writing-mode⑥">5.1. 
The justify-content and align-content Properties</a>
    <li><a href="#ref-for-writing-mode⑦">6.1.1. Block-Level Boxes</a> <a href="#ref-for-writing-mode⑧">(2)</a>
    <li><a href="#ref-for-writing-mode⑨">6.1.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-writing-mode①⓪">(2)</a>
    <li><a href="#ref-for-writing-mode①①">6.1.5. Grid Items</a> <a href="#ref-for-writing-mode①②">(2)</a>
    <li><a href="#ref-for-writing-mode①③">6.2.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-writing-mode①④">(2)</a>
    <li><a href="#ref-for-writing-mode①⑤">6.2.4. Flex Items</a> <a href="#ref-for-writing-mode①⑥">(2)</a>
    <li><a href="#ref-for-writing-mode①⑦">6.2.5. Grid Items</a> <a href="#ref-for-writing-mode①⑧">(2)</a>
    <li><a href="#ref-for-writing-mode①⑨">9. 
Baseline Alignment Details</a>
    <li><a href="#ref-for-writing-mode②⓪">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-writing-mode②①">(2)</a> <a href="#ref-for-writing-mode②②">(3)</a> <a href="#ref-for-writing-mode②③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-propdef-writing-mode①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-spacing">
   <a href="https://drafts.csswg.org/css2/tables.html#propdef-border-spacing">https://drafts.csswg.org/css2/tables.html#propdef-border-spacing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-spacing">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">https://drafts.csswg.org/css2/visudet.html#propdef-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-height">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-propdef-height①">(2)</a>
    <li><a href="#ref-for-propdef-height②">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-propdef-height③">6.2.2. Absolutely-Positioned Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-line-box">
   <a href="https://drafts.csswg.org/css2/visuren.html#line-box">https://drafts.csswg.org/css2/visuren.html#line-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-box">9.1. 
Determining the Baselines of a Box</a>
    <li><a href="#ref-for-line-box①">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">https://drafts.csswg.org/css2/visudet.html#propdef-max-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-height">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-propdef-max-height①">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width">https://drafts.csswg.org/css2/visudet.html#propdef-max-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-width">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-propdef-max-width①">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height">https://drafts.csswg.org/css2/visudet.html#propdef-min-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-height">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width">https://drafts.csswg.org/css2/visudet.html#propdef-min-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-width">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-vertical-align">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-vertical-align">1.1. 
Module interactions</a>
    <li><a href="#ref-for-propdef-vertical-align①">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-propdef-vertical-align②">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-propdef-vertical-align③">9.2. 
Baseline Alignment Grouping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">https://drafts.csswg.org/css2/visudet.html#propdef-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-width">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-propdef-width①">(2)</a>
    <li><a href="#ref-for-propdef-width②">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-propdef-width③">6.2.2. Absolutely-Positioned Boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-first-formatted-line0">
   <a href="https://drafts.csswg.org/selectors-3/#first-formatted-line0">https://drafts.csswg.org/selectors-3/#first-formatted-line0</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-first-formatted-line0">9. 
Baseline Alignment Details</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-content-edge" style="color:initial">content edge</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin" style="color:initial">margin</span>
     <li><span class="dfn-paneled" id="term-for-margin-box" style="color:initial">margin box</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding" style="color:initial">padding</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-inherited-value" style="color:initial">inherited value</span>
     <li><span class="dfn-paneled" id="term-for-shorthand-property" style="color:initial">shorthand</span>
     <li><span class="dfn-paneled" id="term-for-shorthand-property①" style="color:initial">shorthand property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-container" style="color:initial">block container</span>
     <li><span class="dfn-paneled" id="term-for-block-formatting-context" style="color:initial">block formatting context</span>
     <li><span class="dfn-paneled" id="term-for-block-level-box" style="color:initial">block-level box</span>
     <li><span class="dfn-paneled" id="term-for-containing-block" style="color:initial">containing block</span>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-establish-an-independent-formatting-context" style="color:initial">establish an independent formatting context</span>
     <li><span class="dfn-paneled" id="term-for-formatting-context" style="color:initial">formatting context</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-inline-block" style="color:initial">inline-block</span>
     <li><span class="dfn-paneled" id="term-for-inline-level-box" style="color:initial">inline-level box</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-inline-table" style="color:initial">inline-table</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-FLEXBOX-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-justify-content-center" style="color:initial">center</span>
     <li><span class="dfn-paneled" id="term-for-valdef-flex-direction-column" style="color:initial">column</span>
     <li><span class="dfn-paneled" id="term-for-valdef-flex-direction-column-reverse" style="color:initial">column-reverse</span>
     <li><span class="dfn-paneled" id="term-for-cross-axis" style="color:initial">cross axis</span>
     <li><span class="dfn-paneled" id="term-for-propdef-flex" style="color:initial">flex</span>
     <li><span class="dfn-paneled" id="term-for-flex-container" style="color:initial">flex container</span>
     <li><span class="dfn-paneled" id="term-for-flex-formatting-context" style="color:initial">flex formatting context</span>
     <li><span class="dfn-paneled" id="term-for-flex-item" style="color:initial">flex item</span>
     <li><span class="dfn-paneled" id="term-for-flex-layout" style="color:initial">flex layout</span>
     <li><span class="dfn-paneled" id="term-for-flex-line" style="color:initial">flex line</span>
     <li><span class="dfn-paneled" id="term-for-propdef-flex-direction" style="color:initial">flex-direction</span>
     <li><span class="dfn-paneled" id="term-for-propdef-flex-flow" style="color:initial">flex-flow</span>
     <li><span class="dfn-paneled" id="term-for-main-axis" style="color:initial">main axis</span>
     <li><span class="dfn-paneled" id="term-for-main-axis①" style="color:initial">main-axis</span>
     <li><span class="dfn-paneled" id="term-for-multi-line-flex-container" style="color:initial">multi-line flex container</span>
     <li><span class="dfn-paneled" id="term-for-valdef-flex-direction-row" style="color:initial">row</span>
     <li><span class="dfn-paneled" id="term-for-valdef-flex-direction-row-reverse" style="color:initial">row-reverse</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-first-available-font" style="color:initial">first available font</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-GRID-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-collapsed-gutter" style="color:initial">collapsed gutter</span>
     <li><span class="dfn-paneled" id="term-for-grid-area" style="color:initial">grid area</span>
     <li><span class="dfn-paneled" id="term-for-grid-column" style="color:initial">grid column</span>
     <li><span class="dfn-paneled" id="term-for-grid-container" style="color:initial">grid container</span>
     <li><span class="dfn-paneled" id="term-for-grid-item" style="color:initial">grid item</span>
     <li><span class="dfn-paneled" id="term-for-grid-layout" style="color:initial">grid layout</span>
     <li><span class="dfn-paneled" id="term-for-grid-row" style="color:initial">grid row</span>
     <li><span class="dfn-paneled" id="term-for-grid-track" style="color:initial">grid track</span>
     <li><span class="dfn-paneled" id="term-for-grid-placement-property" style="color:initial">grid-placement property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-alignment-baseline" style="color:initial">alignment-baseline</span>
     <li><span class="dfn-paneled" id="term-for-propdef-dominant-baseline" style="color:initial">dominant-baseline</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-logical-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-inset-properties" style="color:initial">inset properties</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-MULTICOL-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-column-width-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-column-box" style="color:initial">column box</span>
     <li><span class="dfn-paneled" id="term-for-propdef-column-width" style="color:initial">column-width</span>
     <li><span class="dfn-paneled" id="term-for-multi-column-container" style="color:initial">multi-column container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-initial-scroll-position" style="color:initial">initial scroll position</span>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
     <li><span class="dfn-paneled" id="term-for-scroll-container" style="color:initial">scroll container</span>
     <li><span class="dfn-paneled" id="term-for-scrollable-overflow-region" style="color:initial">scrollable overflow region</span>
     <li><span class="dfn-paneled" id="term-for-scrollport" style="color:initial">scrollport</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-top-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-propdef-bottom" style="color:initial">bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-left" style="color:initial">left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-right" style="color:initial">right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-top" style="color:initial">top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-width-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-available" style="color:initial">available space</span>
     <li><span class="dfn-paneled" id="term-for-fit-content-size" style="color:initial">fit-content size</span>
     <li><span class="dfn-paneled" id="term-for-stretch-fit-size" style="color:initial">stretch-fit size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-text-align" style="color:initial">text-align</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-comb-all" style="color:initial">&amp;&amp;</span>
     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage" style="color:initial">&lt;length-percentage></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-direction" style="color:initial">direction</span>
     <li><span class="dfn-paneled" id="term-for-dominant-baseline" style="color:initial">dominant baseline</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-axis" style="color:initial">block axis</span>
     <li><span class="dfn-paneled" id="term-for-block-flow-direction" style="color:initial">block flow direction</span>
     <li><span class="dfn-paneled" id="term-for-block-start" style="color:initial">block-start</span>
     <li><span class="dfn-paneled" id="term-for-flow-relative" style="color:initial">flow-relative</span>
     <li><span class="dfn-paneled" id="term-for-valdef-writing-mode-horizontal-tb" style="color:initial">horizontal-tb</span>
     <li><span class="dfn-paneled" id="term-for-inline-axis" style="color:initial">inline axis</span>
     <li><span class="dfn-paneled" id="term-for-inline-size" style="color:initial">inline size</span>
     <li><span class="dfn-paneled" id="term-for-inline-axis①" style="color:initial">inline-axis</span>
     <li><span class="dfn-paneled" id="term-for-inline-end" style="color:initial">inline-end</span>
     <li><span class="dfn-paneled" id="term-for-inline-start" style="color:initial">inline-start</span>
     <li><span class="dfn-paneled" id="term-for-line-orientation" style="color:initial">line orientation</span>
     <li><span class="dfn-paneled" id="term-for-line-left" style="color:initial">line-left</span>
     <li><span class="dfn-paneled" id="term-for-line-over" style="color:initial">line-over</span>
     <li><span class="dfn-paneled" id="term-for-line-right" style="color:initial">line-right</span>
     <li><span class="dfn-paneled" id="term-for-line-under" style="color:initial">line-under</span>
     <li><span class="dfn-paneled" id="term-for-valdef-direction-ltr" style="color:initial">ltr</span>
     <li><span class="dfn-paneled" id="term-for-physical-left" style="color:initial">physical left</span>
     <li><span class="dfn-paneled" id="term-for-physical-right" style="color:initial">physical right</span>
     <li><span class="dfn-paneled" id="term-for-valdef-direction-rtl" style="color:initial">rtl</span>
     <li><span class="dfn-paneled" id="term-for-vertical-writing-mode" style="color:initial">vertical writing mode</span>
     <li><span class="dfn-paneled" id="term-for-valdef-writing-mode-vertical-lr" style="color:initial">vertical-lr</span>
     <li><span class="dfn-paneled" id="term-for-writing-mode" style="color:initial">writing mode</span>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-border-spacing" style="color:initial">border-spacing</span>
     <li><span class="dfn-paneled" id="term-for-propdef-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-line-box" style="color:initial">line box</span>
     <li><span class="dfn-paneled" id="term-for-propdef-max-height" style="color:initial">max-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-max-width" style="color:initial">max-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-height" style="color:initial">min-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-width" style="color:initial">min-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-vertical-align" style="color:initial">vertical-align</span>
     <li><span class="dfn-paneled" id="term-for-propdef-width" style="color:initial">width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-first-formatted-line0" style="color:initial">first formatted line</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
   <dt id="biblio-css-fonts-3">[CSS-FONTS-3]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a>
   <dt id="biblio-css-grid-1">[CSS-GRID-1]
   <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a>
   <dt id="biblio-css-inline-3">[CSS-INLINE-3]
   <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://www.w3.org/TR/css-inline-3/">CSS Inline Layout Module Level 3</a>. 8 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a>
   <dt id="biblio-css-logical-1">[CSS-LOGICAL-1]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-logical-1/">CSS Logical Properties and Values Level 1</a>. 27 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-logical-1/">https://www.w3.org/TR/css-logical-1/</a>
   <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1]
   <dd>Florian Rivoal; Rachel Andrew. <a href="https://www.w3.org/TR/css-multicol-1/">CSS Multi-column Layout Module Level 1</a>. 28 May 2018. WD. URL: <a href="https://www.w3.org/TR/css-multicol-1/">https://www.w3.org/TR/css-multicol-1/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-sizing-3">[CSS-SIZING-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. 22 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-selectors-3">[SELECTORS-3]
   <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/">Selectors Level 3</a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-align-content" id="ref-for-propdef-align-content②⑤">align-content</a>
      <td>normal | &lt;baseline-position> |  &lt;content-distribution> | &lt;overflow-position>? &lt;content-position>
      <td>normal
      <td>block containers, multicol containers, flex containers, and grid containers
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s)
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-align-items" id="ref-for-propdef-align-items⑧">align-items</a>
      <td>normal | stretch | &lt;baseline-position> | [ &lt;overflow-position>? &lt;self-position> ]
      <td>normal
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s)
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-align-self" id="ref-for-propdef-align-self②⑨">align-self</a>
      <td>auto | normal | stretch | &lt;baseline-position> | &lt;overflow-position>? &lt;self-position>
      <td>auto
      <td>flex items, grid items, and absolutely-positioned boxes
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s)
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-gap" id="ref-for-propdef-column-gap①②">column-gap</a>
      <td>normal | &lt;length-percentage>
      <td>normal
      <td>multi-column containers, flex containers, grid containers
      <td>no
      <td>refer to corresponding dimension of the content area
      <td>by computed value type
      <td>per grammar
      <td>specified keyword, else a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-gap" id="ref-for-propdef-gap⑧">gap</a>
      <td>&lt;'row-gap'> &lt;'column-gap'>?
      <td>see individual properties
      <td>multi-column containers, flex containers, grid containers
      <td>no
      <td>refer to corresponding dimension of the content area
      <td>by computed value type
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-content" id="ref-for-propdef-justify-content②⑥">justify-content</a>
      <td>normal | &lt;content-distribution> | &lt;overflow-position>? [ &lt;content-position> | left | right ]
      <td>normal
      <td>multicol containers, flex containers, and grid containers
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s)
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-items" id="ref-for-propdef-justify-items①③">justify-items</a>
      <td>normal | stretch | &lt;baseline-position> | &lt;overflow-position>? [ &lt;self-position> | left | right ] | legacy | legacy &amp;&amp; [ left | right | center ]
      <td>legacy
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s), except for legacy (see prose)
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-self" id="ref-for-propdef-justify-self②⑥">justify-self</a>
      <td>auto | normal | stretch | &lt;baseline-position> | &lt;overflow-position>? [ &lt;self-position> | left | right ]
      <td>auto
      <td>block-level boxes, absolutely-positioned boxes, and grid items
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s)
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-place-content" id="ref-for-propdef-place-content②">place-content</a>
      <td>&lt;'align-content'> &lt;'justify-content'>?
      <td>normal
      <td>block containers, flex containers, and grid containers
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-place-items" id="ref-for-propdef-place-items②">place-items</a>
      <td>&lt;'align-items'> &lt;'justify-items'>?
      <td>see individual properties
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-place-self" id="ref-for-propdef-place-self②">place-self</a>
      <td>&lt;'align-self'> &lt;'justify-self'>?
      <td>auto
      <td>block-level boxes, absolutely-positioned boxes, and grid items
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-gap" id="ref-for-propdef-row-gap①②">row-gap</a>
      <td>normal | &lt;length-percentage>
      <td>normal
      <td>multi-column containers, flex containers, grid containers
      <td>no
      <td>refer to corresponding dimension of the content area
      <td>by computed value type
      <td>per grammar
      <td>specified keyword, else a computed &lt;length-percentage> value
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows. <a href="#issue-bb5da799"> ↵ </a></div>
   <div class="issue">Add example images here. <a href="#issue-13b9ed6a"> ↵ </a></div>
   <div class="issue"> It may not be Web-compatible to implement the “smart” default behavior
			(though we hope so, and believe it to be likely),
			so UAs should pass any feedback on this point to the WG.
			UAs that have not implemented the “smart” default behavior
			must behave as <a class="css" data-link-type="maybe" href="#valdef-overflow-position-unsafe">unsafe</a>.<a href="#issue-f6ca8ac3"> ↵ </a></div>
   <div class="issue"> Coordinate wording with css-overflow once it’s less of a mess.<a href="#issue-9ce4b594"> ↵ </a></div>
   <div class="issue"> Replace this image too.<a href="#issue-f4825563"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="box-alignment-properties">
   <b><a href="#box-alignment-properties">#box-alignment-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box-alignment-properties①">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-box-alignment-properties②">10. 
Appendix A: Static Position Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="alignment-subject">
   <b><a href="#alignment-subject">#alignment-subject</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-alignment-subject">3. 
Alignment Terminology</a> <a href="#ref-for-alignment-subject①">(2)</a> <a href="#ref-for-alignment-subject②">(3)</a> <a href="#ref-for-alignment-subject③">(4)</a> <a href="#ref-for-alignment-subject④">(5)</a> <a href="#ref-for-alignment-subject⑤">(6)</a>
    <li><a href="#ref-for-alignment-subject⑥">4. 
Alignment Keywords</a> <a href="#ref-for-alignment-subject⑦">(2)</a>
    <li><a href="#ref-for-alignment-subject⑧">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-alignment-subject⑨">(2)</a> <a href="#ref-for-alignment-subject①⓪">(3)</a> <a href="#ref-for-alignment-subject①①">(4)</a> <a href="#ref-for-alignment-subject①②">(5)</a> <a href="#ref-for-alignment-subject①③">(6)</a> <a href="#ref-for-alignment-subject①④">(7)</a> <a href="#ref-for-alignment-subject①⑤">(8)</a> <a href="#ref-for-alignment-subject①⑥">(9)</a> <a href="#ref-for-alignment-subject①⑦">(10)</a> <a href="#ref-for-alignment-subject①⑧">(11)</a> <a href="#ref-for-alignment-subject①⑨">(12)</a> <a href="#ref-for-alignment-subject②⓪">(13)</a>
    <li><a href="#ref-for-alignment-subject②①">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-alignment-subject②②">(2)</a>
    <li><a href="#ref-for-alignment-subject②③">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a> <a href="#ref-for-alignment-subject②④">(2)</a> <a href="#ref-for-alignment-subject②⑤">(3)</a> <a href="#ref-for-alignment-subject②⑥">(4)</a> <a href="#ref-for-alignment-subject②⑦">(5)</a> <a href="#ref-for-alignment-subject②⑧">(6)</a> <a href="#ref-for-alignment-subject②⑨">(7)</a> <a href="#ref-for-alignment-subject③⓪">(8)</a> <a href="#ref-for-alignment-subject③①">(9)</a> <a href="#ref-for-alignment-subject③②">(10)</a> <a href="#ref-for-alignment-subject③③">(11)</a> <a href="#ref-for-alignment-subject③④">(12)</a> <a href="#ref-for-alignment-subject③⑤">(13)</a> <a href="#ref-for-alignment-subject③⑥">(14)</a> <a href="#ref-for-alignment-subject③⑦">(15)</a> <a href="#ref-for-alignment-subject③⑧">(16)</a> <a href="#ref-for-alignment-subject③⑨">(17)</a>
    <li><a href="#ref-for-alignment-subject④⓪">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a> <a href="#ref-for-alignment-subject④①">(2)</a> <a href="#ref-for-alignment-subject④②">(3)</a> <a href="#ref-for-alignment-subject④③">(4)</a> <a href="#ref-for-alignment-subject④④">(5)</a>
    <li><a href="#ref-for-alignment-subject④⑤">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-alignment-subject④⑥">(2)</a>
    <li><a href="#ref-for-alignment-subject④⑦">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-alignment-subject④⑧">5.1.2. Multicol Containers</a>
    <li><a href="#ref-for-alignment-subject④⑨">5.1.3. Flex Containers</a>
    <li><a href="#ref-for-alignment-subject⑤⓪">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-alignment-subject⑤①">5.3. 
Overflow and Scroll Positions</a> <a href="#ref-for-alignment-subject⑤②">(2)</a> <a href="#ref-for-alignment-subject⑤③">(3)</a> <a href="#ref-for-alignment-subject⑤④">(4)</a> <a href="#ref-for-alignment-subject⑤⑤">(5)</a> <a href="#ref-for-alignment-subject⑤⑥">(6)</a> <a href="#ref-for-alignment-subject⑤⑦">(7)</a> <a href="#ref-for-alignment-subject⑤⑧">(8)</a>
    <li><a href="#ref-for-alignment-subject⑤⑨">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
    <li><a href="#ref-for-alignment-subject⑥⓪">6.1.1. Block-Level Boxes</a>
    <li><a href="#ref-for-alignment-subject⑥①">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-alignment-subject⑥②">6.1.5. Grid Items</a>
    <li><a href="#ref-for-alignment-subject⑥③">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a>
    <li><a href="#ref-for-alignment-subject⑥④">6.2.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-alignment-subject⑥⑤">6.2.4. Flex Items</a>
    <li><a href="#ref-for-alignment-subject⑥⑥">6.2.5. Grid Items</a>
    <li><a href="#ref-for-alignment-subject⑥⑦">9.3. 
Aligning Boxes by Baseline</a> <a href="#ref-for-alignment-subject⑥⑧">(2)</a> <a href="#ref-for-alignment-subject⑥⑨">(3)</a> <a href="#ref-for-alignment-subject⑦⓪">(4)</a> <a href="#ref-for-alignment-subject⑦①">(5)</a> <a href="#ref-for-alignment-subject⑦②">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="alignment-container">
   <b><a href="#alignment-container">#alignment-container</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-alignment-container">3. 
Alignment Terminology</a>
    <li><a href="#ref-for-alignment-container①">4. 
Alignment Keywords</a>
    <li><a href="#ref-for-alignment-container②">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-alignment-container③">(2)</a> <a href="#ref-for-alignment-container④">(3)</a> <a href="#ref-for-alignment-container⑤">(4)</a> <a href="#ref-for-alignment-container⑥">(5)</a> <a href="#ref-for-alignment-container⑦">(6)</a> <a href="#ref-for-alignment-container⑧">(7)</a> <a href="#ref-for-alignment-container⑨">(8)</a> <a href="#ref-for-alignment-container①⓪">(9)</a> <a href="#ref-for-alignment-container①①">(10)</a> <a href="#ref-for-alignment-container①②">(11)</a> <a href="#ref-for-alignment-container①③">(12)</a>
    <li><a href="#ref-for-alignment-container①④">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-alignment-container①⑤">(2)</a>
    <li><a href="#ref-for-alignment-container①⑥">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a> <a href="#ref-for-alignment-container①⑦">(2)</a> <a href="#ref-for-alignment-container①⑧">(3)</a> <a href="#ref-for-alignment-container①⑨">(4)</a> <a href="#ref-for-alignment-container②⓪">(5)</a> <a href="#ref-for-alignment-container②①">(6)</a> <a href="#ref-for-alignment-container②②">(7)</a>
    <li><a href="#ref-for-alignment-container②③">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a> <a href="#ref-for-alignment-container②④">(2)</a> <a href="#ref-for-alignment-container②⑤">(3)</a> <a href="#ref-for-alignment-container②⑥">(4)</a>
    <li><a href="#ref-for-alignment-container②⑦">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-alignment-container②⑧">(2)</a>
    <li><a href="#ref-for-alignment-container②⑨">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-alignment-container③⓪">5.1.2. Multicol Containers</a>
    <li><a href="#ref-for-alignment-container③①">5.1.3. Flex Containers</a>
    <li><a href="#ref-for-alignment-container③②">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-alignment-container③③">5.3. 
Overflow and Scroll Positions</a> <a href="#ref-for-alignment-container③④">(2)</a>
    <li><a href="#ref-for-alignment-container③⑤">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-alignment-container③⑥">(2)</a> <a href="#ref-for-alignment-container③⑦">(3)</a> <a href="#ref-for-alignment-container③⑧">(4)</a>
    <li><a href="#ref-for-alignment-container③⑨">6.1.1. Block-Level Boxes</a> <a href="#ref-for-alignment-container④⓪">(2)</a>
    <li><a href="#ref-for-alignment-container④①">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-alignment-container④②">6.1.5. Grid Items</a>
    <li><a href="#ref-for-alignment-container④③">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a> <a href="#ref-for-alignment-container④④">(2)</a> <a href="#ref-for-alignment-container④⑤">(3)</a>
    <li><a href="#ref-for-alignment-container④⑥">6.2.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-alignment-container④⑦">6.2.4. Flex Items</a>
    <li><a href="#ref-for-alignment-container④⑧">6.2.5. Grid Items</a>
    <li><a href="#ref-for-alignment-container④⑨">9.3. 
Aligning Boxes by Baseline</a> <a href="#ref-for-alignment-container⑤⓪">(2)</a> <a href="#ref-for-alignment-container⑤①">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fallback-alignment">
   <b><a href="#fallback-alignment">#fallback-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fallback-alignment">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-fallback-alignment①">(2)</a> <a href="#ref-for-fallback-alignment②">(3)</a> <a href="#ref-for-fallback-alignment③">(4)</a> <a href="#ref-for-fallback-alignment④">(5)</a>
    <li><a href="#ref-for-fallback-alignment⑤">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a> <a href="#ref-for-fallback-alignment⑥">(2)</a> <a href="#ref-for-fallback-alignment⑦">(3)</a> <a href="#ref-for-fallback-alignment⑧">(4)</a> <a href="#ref-for-fallback-alignment⑨">(5)</a> <a href="#ref-for-fallback-alignment①⓪">(6)</a> <a href="#ref-for-fallback-alignment①①">(7)</a>
    <li><a href="#ref-for-fallback-alignment①②">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-fallback-alignment①③">5.1.2. Multicol Containers</a>
    <li><a href="#ref-for-fallback-alignment①④">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-fallback-alignment①⑤">(2)</a>
    <li><a href="#ref-for-fallback-alignment①⑥">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
    <li><a href="#ref-for-fallback-alignment①⑦">9.3. 
Aligning Boxes by Baseline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="positional-alignment">
   <b><a href="#positional-alignment">#positional-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-positional-alignment">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-self-position-center">
   <b><a href="#valdef-self-position-center">#valdef-self-position-center</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-self-position-center">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-valdef-self-position-center①">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a> <a href="#ref-for-valdef-self-position-center②">(2)</a>
    <li><a href="#ref-for-valdef-self-position-center③">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-valdef-self-position-center④">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-self-position-start">
   <b><a href="#valdef-self-position-start">#valdef-self-position-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-self-position-start">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-valdef-self-position-start①">(2)</a> <a href="#ref-for-valdef-self-position-start②">(3)</a> <a href="#ref-for-valdef-self-position-start③">(4)</a> <a href="#ref-for-valdef-self-position-start④">(5)</a> <a href="#ref-for-valdef-self-position-start⑤">(6)</a> <a href="#ref-for-valdef-self-position-start⑥">(7)</a> <a href="#ref-for-valdef-self-position-start⑦">(8)</a> <a href="#ref-for-valdef-self-position-start⑧">(9)</a> <a href="#ref-for-valdef-self-position-start⑨">(10)</a> <a href="#ref-for-valdef-self-position-start①⓪">(11)</a> <a href="#ref-for-valdef-self-position-start①①">(12)</a> <a href="#ref-for-valdef-self-position-start①②">(13)</a> <a href="#ref-for-valdef-self-position-start①③">(14)</a> <a href="#ref-for-valdef-self-position-start①④">(15)</a> <a href="#ref-for-valdef-self-position-start①⑤">(16)</a> <a href="#ref-for-valdef-self-position-start①⑥">(17)</a>
    <li><a href="#ref-for-valdef-self-position-start①⑦">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-valdef-self-position-start①⑧">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a> <a href="#ref-for-valdef-self-position-start①⑨">(2)</a>
    <li><a href="#ref-for-valdef-self-position-start②⓪">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a>
    <li><a href="#ref-for-valdef-self-position-start②①">5.1.1. Block Containers (Including Table Cells)</a> <a href="#ref-for-valdef-self-position-start②②">(2)</a>
    <li><a href="#ref-for-valdef-self-position-start②③">5.2. 
Content-Distribution Shorthand: the place-content property</a>
    <li><a href="#ref-for-valdef-self-position-start②④">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-valdef-self-position-start②⑤">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-valdef-self-position-start②⑥">6.2.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-valdef-self-position-start②⑦">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-self-position-end">
   <b><a href="#valdef-self-position-end">#valdef-self-position-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-self-position-end">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-valdef-self-position-end①">(2)</a> <a href="#ref-for-valdef-self-position-end②">(3)</a> <a href="#ref-for-valdef-self-position-end③">(4)</a> <a href="#ref-for-valdef-self-position-end④">(5)</a> <a href="#ref-for-valdef-self-position-end⑤">(6)</a> <a href="#ref-for-valdef-self-position-end⑥">(7)</a> <a href="#ref-for-valdef-self-position-end⑦">(8)</a> <a href="#ref-for-valdef-self-position-end⑧">(9)</a> <a href="#ref-for-valdef-self-position-end⑨">(10)</a> <a href="#ref-for-valdef-self-position-end①⓪">(11)</a> <a href="#ref-for-valdef-self-position-end①①">(12)</a> <a href="#ref-for-valdef-self-position-end①②">(13)</a>
    <li><a href="#ref-for-valdef-self-position-end①③">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-valdef-self-position-end①④">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-valdef-self-position-end①⑤">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-self-position-self-start">
   <b><a href="#valdef-self-position-self-start">#valdef-self-position-self-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-self-position-self-start">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-valdef-self-position-self-start①">(2)</a> <a href="#ref-for-valdef-self-position-self-start②">(3)</a> <a href="#ref-for-valdef-self-position-self-start③">(4)</a>
    <li><a href="#ref-for-valdef-self-position-self-start④">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-valdef-self-position-self-start⑤">(2)</a>
    <li><a href="#ref-for-valdef-self-position-self-start⑥">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-self-position-self-end">
   <b><a href="#valdef-self-position-self-end">#valdef-self-position-self-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-self-position-self-end">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-valdef-self-position-self-end①">(2)</a>
    <li><a href="#ref-for-valdef-self-position-self-end②">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-valdef-self-position-self-end③">(2)</a>
    <li><a href="#ref-for-valdef-self-position-self-end④">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-self-position-flex-start">
   <b><a href="#valdef-self-position-flex-start">#valdef-self-position-flex-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-self-position-flex-start">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-valdef-self-position-flex-start①">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a> <a href="#ref-for-valdef-self-position-flex-start②">(2)</a> <a href="#ref-for-valdef-self-position-flex-start③">(3)</a> <a href="#ref-for-valdef-self-position-flex-start④">(4)</a>
    <li><a href="#ref-for-valdef-self-position-flex-start⑤">5.1.3. Flex Containers</a>
    <li><a href="#ref-for-valdef-self-position-flex-start⑥">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-valdef-self-position-flex-start⑦">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-self-position-flex-end">
   <b><a href="#valdef-self-position-flex-end">#valdef-self-position-flex-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-self-position-flex-end">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-valdef-self-position-flex-end①">5.4. 
Baseline Content-Alignment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-content-left">
   <b><a href="#valdef-justify-content-left">#valdef-justify-content-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-content-left">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-valdef-justify-content-left①">(2)</a> <a href="#ref-for-valdef-justify-content-left②">(3)</a> <a href="#ref-for-valdef-justify-content-left③">(4)</a> <a href="#ref-for-valdef-justify-content-left④">(5)</a> <a href="#ref-for-valdef-justify-content-left⑤">(6)</a>
    <li><a href="#ref-for-valdef-justify-content-left⑥">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a>
    <li><a href="#ref-for-valdef-justify-content-left⑦">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-content-right">
   <b><a href="#valdef-justify-content-right">#valdef-justify-content-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-content-right">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-valdef-justify-content-right①">(2)</a> <a href="#ref-for-valdef-justify-content-right②">(3)</a> <a href="#ref-for-valdef-justify-content-right③">(4)</a> <a href="#ref-for-valdef-justify-content-right④">(5)</a> <a href="#ref-for-valdef-justify-content-right⑤">(6)</a>
    <li><a href="#ref-for-valdef-justify-content-right⑥">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a>
    <li><a href="#ref-for-valdef-justify-content-right⑦">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-self-position">
   <b><a href="#typedef-self-position">#typedef-self-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-self-position">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-typedef-self-position①">(2)</a>
    <li><a href="#ref-for-typedef-self-position②">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-typedef-self-position③">(2)</a>
    <li><a href="#ref-for-typedef-self-position④">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a> <a href="#ref-for-typedef-self-position⑤">(2)</a>
    <li><a href="#ref-for-typedef-self-position⑥">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a>
    <li><a href="#ref-for-typedef-self-position⑦">7.2. 
Block-Axis (or Cross-Axis) Alignment: the align-items property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-content-position">
   <b><a href="#typedef-content-position">#typedef-content-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-content-position">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-typedef-content-position①">(2)</a>
    <li><a href="#ref-for-typedef-content-position②">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-typedef-content-position③">(2)</a>
    <li><a href="#ref-for-typedef-content-position④">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="baseline-alignment">
   <b><a href="#baseline-alignment">#baseline-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-baseline-alignment">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-baseline-alignment①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-baseline-position">
   <b><a href="#typedef-baseline-position">#typedef-baseline-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-baseline-position">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-typedef-baseline-position①">5.1. 
The justify-content and align-content Properties</a>
    <li><a href="#ref-for-typedef-baseline-position②">5.2. 
Content-Distribution Shorthand: the place-content property</a>
    <li><a href="#ref-for-typedef-baseline-position③">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-typedef-baseline-position④">(2)</a>
    <li><a href="#ref-for-typedef-baseline-position⑤">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a> <a href="#ref-for-typedef-baseline-position⑥">(2)</a>
    <li><a href="#ref-for-typedef-baseline-position⑦">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a>
    <li><a href="#ref-for-typedef-baseline-position⑧">7.2. 
Block-Axis (or Cross-Axis) Alignment: the align-items property</a>
    <li><a href="#ref-for-typedef-baseline-position⑨">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="baseline-alignment-preference">
   <b><a href="#baseline-alignment-preference">#baseline-alignment-preference</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-baseline-alignment-preference">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-baseline-alignment-preference①">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-baseline-alignment-preference②">9.2. 
Baseline Alignment Grouping</a> <a href="#ref-for-baseline-alignment-preference③">(2)</a> <a href="#ref-for-baseline-alignment-preference④">(3)</a>
    <li><a href="#ref-for-baseline-alignment-preference⑤">9.3. 
Aligning Boxes by Baseline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-self-baseline">
   <b><a href="#valdef-justify-self-baseline">#valdef-justify-self-baseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-self-baseline">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-valdef-justify-self-baseline①">(2)</a> <a href="#ref-for-valdef-justify-self-baseline②">(3)</a> <a href="#ref-for-valdef-justify-self-baseline③">(4)</a>
    <li><a href="#ref-for-valdef-justify-self-baseline④">5.1.1. Block Containers (Including Table Cells)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-self-first-baseline">
   <b><a href="#valdef-justify-self-first-baseline">#valdef-justify-self-first-baseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-self-first-baseline">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-valdef-justify-self-first-baseline①">(2)</a> <a href="#ref-for-valdef-justify-self-first-baseline②">(3)</a> <a href="#ref-for-valdef-justify-self-first-baseline③">(4)</a> <a href="#ref-for-valdef-justify-self-first-baseline④">(5)</a> <a href="#ref-for-valdef-justify-self-first-baseline⑤">(6)</a>
    <li><a href="#ref-for-valdef-justify-self-first-baseline⑥">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-valdef-justify-self-first-baseline⑦">(2)</a> <a href="#ref-for-valdef-justify-self-first-baseline⑧">(3)</a>
    <li><a href="#ref-for-valdef-justify-self-first-baseline⑨">6.4. 
Baseline Self-Alignment</a> <a href="#ref-for-valdef-justify-self-first-baseline①⓪">(2)</a>
    <li><a href="#ref-for-valdef-justify-self-first-baseline①①">9.1. 
Determining the Baselines of a Box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="first-baseline-alignment">
   <b><a href="#first-baseline-alignment">#first-baseline-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-first-baseline-alignment">9.2. 
Baseline Alignment Grouping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-self-last-baseline">
   <b><a href="#valdef-justify-self-last-baseline">#valdef-justify-self-last-baseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-self-last-baseline">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-valdef-justify-self-last-baseline①">(2)</a> <a href="#ref-for-valdef-justify-self-last-baseline②">(3)</a>
    <li><a href="#ref-for-valdef-justify-self-last-baseline③">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-valdef-justify-self-last-baseline④">(2)</a> <a href="#ref-for-valdef-justify-self-last-baseline⑤">(3)</a>
    <li><a href="#ref-for-valdef-justify-self-last-baseline⑥">6.4. 
Baseline Self-Alignment</a> <a href="#ref-for-valdef-justify-self-last-baseline⑦">(2)</a>
    <li><a href="#ref-for-valdef-justify-self-last-baseline⑧">9.1. 
Determining the Baselines of a Box</a>
    <li><a href="#ref-for-valdef-justify-self-last-baseline⑨">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="last-baseline-alignment">
   <b><a href="#last-baseline-alignment">#last-baseline-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-last-baseline-alignment">9.2. 
Baseline Alignment Grouping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="distributed-alignment">
   <b><a href="#distributed-alignment">#distributed-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-distributed-alignment">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-distributed-alignment①">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-align-content-space-between">
   <b><a href="#valdef-align-content-space-between">#valdef-align-content-space-between</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-align-content-space-between">3. 
Alignment Terminology</a>
    <li><a href="#ref-for-valdef-align-content-space-between①">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-valdef-align-content-space-between②">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
    <li><a href="#ref-for-valdef-align-content-space-between③">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-valdef-align-content-space-between④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-align-content-space-around">
   <b><a href="#valdef-align-content-space-around">#valdef-align-content-space-around</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-align-content-space-around">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-align-content-space-evenly">
   <b><a href="#valdef-align-content-space-evenly">#valdef-align-content-space-evenly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-align-content-space-evenly">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-valdef-align-content-space-evenly①">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-align-content-stretch">
   <b><a href="#valdef-align-content-stretch">#valdef-align-content-stretch</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-align-content-stretch">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-valdef-align-content-stretch①">5.1.2. Multicol Containers</a> <a href="#ref-for-valdef-align-content-stretch②">(2)</a>
    <li><a href="#ref-for-valdef-align-content-stretch③">5.1.3. Flex Containers</a> <a href="#ref-for-valdef-align-content-stretch④">(2)</a>
    <li><a href="#ref-for-valdef-align-content-stretch⑤">5.1.4. Grid Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-content-distribution">
   <b><a href="#typedef-content-distribution">#typedef-content-distribution</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-content-distribution">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-typedef-content-distribution①">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-typedef-content-distribution②">(2)</a>
    <li><a href="#ref-for-typedef-content-distribution③">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-typedef-content-distribution④">5.1.2. Multicol Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="overflow-alignment">
   <b><a href="#overflow-alignment">#overflow-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-overflow-alignment">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a> <a href="#ref-for-overflow-alignment①">(2)</a>
    <li><a href="#ref-for-overflow-alignment②">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-overflow-alignment③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-overflow-position">
   <b><a href="#typedef-overflow-position">#typedef-overflow-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-overflow-position②">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-typedef-overflow-position③">(2)</a>
    <li><a href="#ref-for-typedef-overflow-position④">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-typedef-overflow-position⑤">(2)</a>
    <li><a href="#ref-for-typedef-overflow-position⑥">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a> <a href="#ref-for-typedef-overflow-position⑦">(2)</a>
    <li><a href="#ref-for-typedef-overflow-position⑧">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a>
    <li><a href="#ref-for-typedef-overflow-position⑨">7.2. 
Block-Axis (or Cross-Axis) Alignment: the align-items property</a>
    <li><a href="#ref-for-typedef-overflow-position①⓪">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-overflow-position-safe">
   <b><a href="#valdef-overflow-position-safe">#valdef-overflow-position-safe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-overflow-position-safe①">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-overflow-position-unsafe">
   <b><a href="#valdef-overflow-position-unsafe">#valdef-overflow-position-unsafe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-overflow-position-unsafe">4.4. 
Overflow Alignment: the safe and unsafe keywords and scroll safety limits</a> <a href="#ref-for-valdef-overflow-position-unsafe①">(2)</a>
    <li><a href="#ref-for-valdef-overflow-position-unsafe②">5.4. 
Baseline Content-Alignment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="content-distribute">
   <b><a href="#content-distribute">#content-distribute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-distribute">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-content-distribute①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="content-distribution-properties">
   <b><a href="#content-distribution-properties">#content-distribution-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-distribution-properties">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-content-distribution-properties①">(2)</a>
    <li><a href="#ref-for-content-distribution-properties②">5.3. 
Overflow and Scroll Positions</a>
    <li><a href="#ref-for-content-distribution-properties③">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
    <li><a href="#ref-for-content-distribution-properties④">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-align-content">
   <b><a href="#propdef-align-content">#propdef-align-content</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-align-content">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-propdef-align-content①">3. 
Alignment Terminology</a>
    <li><a href="#ref-for-propdef-align-content②">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-propdef-align-content③">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-propdef-align-content④">(2)</a>
    <li><a href="#ref-for-propdef-align-content⑤">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-propdef-align-content⑥">5. 
Content Distribution: Aligning a Box’s Contents Within Itself</a>
    <li><a href="#ref-for-propdef-align-content⑦">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-propdef-align-content⑧">(2)</a>
    <li><a href="#ref-for-propdef-align-content⑨">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-propdef-align-content①⓪">5.1.2. Multicol Containers</a>
    <li><a href="#ref-for-propdef-align-content①①">5.1.3. Flex Containers</a> <a href="#ref-for-propdef-align-content①②">(2)</a>
    <li><a href="#ref-for-propdef-align-content①③">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-propdef-align-content①④">5.2. 
Content-Distribution Shorthand: the place-content property</a> <a href="#ref-for-propdef-align-content①⑤">(2)</a> <a href="#ref-for-propdef-align-content①⑥">(3)</a>
    <li><a href="#ref-for-propdef-align-content①⑦">5.3. 
Overflow and Scroll Positions</a>
    <li><a href="#ref-for-propdef-align-content①⑧">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-propdef-align-content①⑨">(2)</a> <a href="#ref-for-propdef-align-content②⓪">(3)</a> <a href="#ref-for-propdef-align-content②①">(4)</a>
    <li><a href="#ref-for-propdef-align-content②②">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
    <li><a href="#ref-for-propdef-align-content②③">9. 
Baseline Alignment Details</a>
    <li><a href="#ref-for-propdef-align-content②④">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-justify-content">
   <b><a href="#propdef-justify-content">#propdef-justify-content</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-justify-content">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-propdef-justify-content①">3. 
Alignment Terminology</a>
    <li><a href="#ref-for-propdef-justify-content②">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-propdef-justify-content③">(2)</a>
    <li><a href="#ref-for-propdef-justify-content④">4.3. 
Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a>
    <li><a href="#ref-for-propdef-justify-content⑤">5. 
Content Distribution: Aligning a Box’s Contents Within Itself</a>
    <li><a href="#ref-for-propdef-justify-content⑥">5.1. 
The justify-content and align-content Properties</a> <a href="#ref-for-propdef-justify-content⑦">(2)</a>
    <li><a href="#ref-for-propdef-justify-content⑧">5.1.1. Block Containers (Including Table Cells)</a>
    <li><a href="#ref-for-propdef-justify-content⑨">5.1.2. Multicol Containers</a> <a href="#ref-for-propdef-justify-content①⓪">(2)</a> <a href="#ref-for-propdef-justify-content①①">(3)</a>
    <li><a href="#ref-for-propdef-justify-content①②">5.1.3. Flex Containers</a> <a href="#ref-for-propdef-justify-content①③">(2)</a> <a href="#ref-for-propdef-justify-content①④">(3)</a>
    <li><a href="#ref-for-propdef-justify-content①⑤">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-propdef-justify-content①⑥">5.2. 
Content-Distribution Shorthand: the place-content property</a> <a href="#ref-for-propdef-justify-content①⑦">(2)</a> <a href="#ref-for-propdef-justify-content①⑧">(3)</a>
    <li><a href="#ref-for-propdef-justify-content①⑨">5.3. 
Overflow and Scroll Positions</a> <a href="#ref-for-propdef-justify-content②⓪">(2)</a> <a href="#ref-for-propdef-justify-content②①">(3)</a>
    <li><a href="#ref-for-propdef-justify-content②②">6.1.4. Flex Items</a>
    <li><a href="#ref-for-propdef-justify-content②③">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
    <li><a href="#ref-for-propdef-justify-content②④">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
    <li><a href="#ref-for-propdef-justify-content②⑤">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-content-normal">
   <b><a href="#valdef-justify-content-normal">#valdef-justify-content-normal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-content-normal">5.1.1. Block Containers (Including Table Cells)</a> <a href="#ref-for-valdef-justify-content-normal①">(2)</a> <a href="#ref-for-valdef-justify-content-normal②">(3)</a> <a href="#ref-for-valdef-justify-content-normal③">(4)</a>
    <li><a href="#ref-for-valdef-justify-content-normal④">5.1.2. Multicol Containers</a> <a href="#ref-for-valdef-justify-content-normal⑤">(2)</a> <a href="#ref-for-valdef-justify-content-normal⑥">(3)</a>
    <li><a href="#ref-for-valdef-justify-content-normal⑦">5.1.3. Flex Containers</a> <a href="#ref-for-valdef-justify-content-normal⑧">(2)</a>
    <li><a href="#ref-for-valdef-justify-content-normal⑨">5.1.4. Grid Containers</a> <a href="#ref-for-valdef-justify-content-normal①⓪">(2)</a>
    <li><a href="#ref-for-valdef-justify-content-normal①①">5.3. 
Overflow and Scroll Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-place-content">
   <b><a href="#propdef-place-content">#propdef-place-content</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-place-content">5. 
Content Distribution: Aligning a Box’s Contents Within Itself</a>
    <li><a href="#ref-for-propdef-place-content①">5.2. 
Content-Distribution Shorthand: the place-content property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="baseline-content-alignment">
   <b><a href="#baseline-content-alignment">#baseline-content-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-baseline-content-alignment">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-baseline-content-alignment①">(2)</a>
    <li><a href="#ref-for-baseline-content-alignment②">5.4. 
Baseline Content-Alignment</a> <a href="#ref-for-baseline-content-alignment③">(2)</a> <a href="#ref-for-baseline-content-alignment④">(3)</a> <a href="#ref-for-baseline-content-alignment⑤">(4)</a> <a href="#ref-for-baseline-content-alignment⑥">(5)</a> <a href="#ref-for-baseline-content-alignment⑦">(6)</a> <a href="#ref-for-baseline-content-alignment⑧">(7)</a> <a href="#ref-for-baseline-content-alignment⑨">(8)</a>
    <li><a href="#ref-for-baseline-content-alignment①⓪">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
    <li><a href="#ref-for-baseline-content-alignment①①">9.2. 
Baseline Alignment Grouping</a>
    <li><a href="#ref-for-baseline-content-alignment①②">9.3. 
Aligning Boxes by Baseline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="self-align">
   <b><a href="#self-align">#self-align</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-self-align">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-self-align①">(2)</a>
    <li><a href="#ref-for-self-align②">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-self-align③">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="self-alignment-properties">
   <b><a href="#self-alignment-properties">#self-alignment-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-self-alignment-properties">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-self-alignment-properties①">(2)</a>
    <li><a href="#ref-for-self-alignment-properties②">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-self-alignment-properties③">6.1.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-self-alignment-properties④">6.2.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-self-alignment-properties⑤">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-justify-self">
   <b><a href="#propdef-justify-self">#propdef-justify-self</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-justify-self">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-propdef-justify-self①">3. 
Alignment Terminology</a>
    <li><a href="#ref-for-propdef-justify-self②">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-propdef-justify-self③">(2)</a> <a href="#ref-for-propdef-justify-self④">(3)</a>
    <li><a href="#ref-for-propdef-justify-self⑤">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-propdef-justify-self⑥">6. 
Self-Alignment: Aligning the Box Within Its Parent</a>
    <li><a href="#ref-for-propdef-justify-self⑦">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-propdef-justify-self⑧">(2)</a>
    <li><a href="#ref-for-propdef-justify-self⑨">6.1.1. Block-Level Boxes</a>
    <li><a href="#ref-for-propdef-justify-self①⓪">6.1.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-propdef-justify-self①①">(2)</a> <a href="#ref-for-propdef-justify-self①②">(3)</a>
    <li><a href="#ref-for-propdef-justify-self①③">6.1.5. Grid Items</a>
    <li><a href="#ref-for-propdef-justify-self①④">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a>
    <li><a href="#ref-for-propdef-justify-self①⑤">6.3. 
Self-Alignment Shorthand: the place-self property</a> <a href="#ref-for-propdef-justify-self①⑥">(2)</a> <a href="#ref-for-propdef-justify-self①⑦">(3)</a>
    <li><a href="#ref-for-propdef-justify-self①⑧">6.4. 
Baseline Self-Alignment</a>
    <li><a href="#ref-for-propdef-justify-self①⑨">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-propdef-justify-self②⓪">(2)</a> <a href="#ref-for-propdef-justify-self②①">(3)</a> <a href="#ref-for-propdef-justify-self②②">(4)</a>
    <li><a href="#ref-for-propdef-justify-self②③">7. 
Default Alignment</a>
    <li><a href="#ref-for-propdef-justify-self②④">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a> <a href="#ref-for-propdef-justify-self②⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-self-normal">
   <b><a href="#valdef-justify-self-normal">#valdef-justify-self-normal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-self-normal">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
    <li><a href="#ref-for-valdef-justify-self-normal①">6.1.1. Block-Level Boxes</a>
    <li><a href="#ref-for-valdef-justify-self-normal②">6.1.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-valdef-justify-self-normal③">(2)</a> <a href="#ref-for-valdef-justify-self-normal④">(3)</a> <a href="#ref-for-valdef-justify-self-normal⑤">(4)</a> <a href="#ref-for-valdef-justify-self-normal⑥">(5)</a>
    <li><a href="#ref-for-valdef-justify-self-normal⑦">6.1.5. Grid Items</a>
    <li><a href="#ref-for-valdef-justify-self-normal⑧">6.2.2. Absolutely-Positioned Boxes</a>
    <li><a href="#ref-for-valdef-justify-self-normal⑨">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-self-stretch">
   <b><a href="#valdef-justify-self-stretch">#valdef-justify-self-stretch</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-self-stretch">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a> <a href="#ref-for-valdef-justify-self-stretch①">(2)</a>
    <li><a href="#ref-for-valdef-justify-self-stretch②">6.1.1. Block-Level Boxes</a>
    <li><a href="#ref-for-valdef-justify-self-stretch③">6.1.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-valdef-justify-self-stretch④">(2)</a>
    <li><a href="#ref-for-valdef-justify-self-stretch⑤">6.1.5. Grid Items</a>
    <li><a href="#ref-for-valdef-justify-self-stretch⑥">6.2.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-valdef-justify-self-stretch⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-align-self">
   <b><a href="#propdef-align-self">#propdef-align-self</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-align-self">1.3. 
Partial Implementations</a> <a href="#ref-for-propdef-align-self①">(2)</a> <a href="#ref-for-propdef-align-self②">(3)</a>
    <li><a href="#ref-for-propdef-align-self③">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-propdef-align-self④">3. 
Alignment Terminology</a>
    <li><a href="#ref-for-propdef-align-self⑤">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-propdef-align-self⑥">(2)</a>
    <li><a href="#ref-for-propdef-align-self⑦">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-propdef-align-self⑧">6. 
Self-Alignment: Aligning the Box Within Its Parent</a>
    <li><a href="#ref-for-propdef-align-self⑨">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a> <a href="#ref-for-propdef-align-self①⓪">(2)</a>
    <li><a href="#ref-for-propdef-align-self①①">6.2.1. Block-Level Boxes</a>
    <li><a href="#ref-for-propdef-align-self①②">6.2.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-propdef-align-self①③">(2)</a> <a href="#ref-for-propdef-align-self①④">(3)</a>
    <li><a href="#ref-for-propdef-align-self①⑤">6.2.4. Flex Items</a>
    <li><a href="#ref-for-propdef-align-self①⑥">6.2.5. Grid Items</a>
    <li><a href="#ref-for-propdef-align-self①⑦">6.3. 
Self-Alignment Shorthand: the place-self property</a> <a href="#ref-for-propdef-align-self①⑧">(2)</a> <a href="#ref-for-propdef-align-self①⑨">(3)</a>
    <li><a href="#ref-for-propdef-align-self②⓪">6.4. 
Baseline Self-Alignment</a> <a href="#ref-for-propdef-align-self②①">(2)</a>
    <li><a href="#ref-for-propdef-align-self②②">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-propdef-align-self②③">(2)</a>
    <li><a href="#ref-for-propdef-align-self②④">7. 
Default Alignment</a>
    <li><a href="#ref-for-propdef-align-self②⑤">7.2. 
Block-Axis (or Cross-Axis) Alignment: the align-items property</a> <a href="#ref-for-propdef-align-self②⑥">(2)</a>
    <li><a href="#ref-for-propdef-align-self②⑦">9.2. 
Baseline Alignment Grouping</a>
    <li><a href="#ref-for-propdef-align-self②⑧">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-align-self-normal">
   <b><a href="#valdef-align-self-normal">#valdef-align-self-normal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-align-self-normal">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a>
    <li><a href="#ref-for-valdef-align-self-normal①">6.2.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-valdef-align-self-normal②">(2)</a> <a href="#ref-for-valdef-align-self-normal③">(3)</a> <a href="#ref-for-valdef-align-self-normal④">(4)</a>
    <li><a href="#ref-for-valdef-align-self-normal⑤">6.2.4. Flex Items</a>
    <li><a href="#ref-for-valdef-align-self-normal⑥">6.2.5. Grid Items</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-align-self-stretch">
   <b><a href="#valdef-align-self-stretch">#valdef-align-self-stretch</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-align-self-stretch">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-valdef-align-self-stretch①">6.2.4. Flex Items</a>
    <li><a href="#ref-for-valdef-align-self-stretch②">6.2.5. Grid Items</a>
    <li><a href="#ref-for-valdef-align-self-stretch③">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-place-self">
   <b><a href="#propdef-place-self">#propdef-place-self</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-place-self">6. 
Self-Alignment: Aligning the Box Within Its Parent</a>
    <li><a href="#ref-for-propdef-place-self①">6.3. 
Self-Alignment Shorthand: the place-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="baseline-self-alignment">
   <b><a href="#baseline-self-alignment">#baseline-self-alignment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-baseline-self-alignment">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-baseline-self-alignment①">(2)</a> <a href="#ref-for-baseline-self-alignment②">(3)</a>
    <li><a href="#ref-for-baseline-self-alignment③">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
    <li><a href="#ref-for-baseline-self-alignment④">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a>
    <li><a href="#ref-for-baseline-self-alignment⑤">6.4. 
Baseline Self-Alignment</a> <a href="#ref-for-baseline-self-alignment⑥">(2)</a> <a href="#ref-for-baseline-self-alignment⑦">(3)</a> <a href="#ref-for-baseline-self-alignment⑧">(4)</a>
    <li><a href="#ref-for-baseline-self-alignment⑨">9.2. 
Baseline Alignment Grouping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-justify-items">
   <b><a href="#propdef-justify-items">#propdef-justify-items</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-justify-items①">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-propdef-justify-items②">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a> <a href="#ref-for-propdef-justify-items③">(2)</a>
    <li><a href="#ref-for-propdef-justify-items④">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
    <li><a href="#ref-for-propdef-justify-items⑤">7. 
Default Alignment</a>
    <li><a href="#ref-for-propdef-justify-items⑥">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a> <a href="#ref-for-propdef-justify-items⑦">(2)</a>
    <li><a href="#ref-for-propdef-justify-items⑧">7.3. 
Self-Alignment Shorthand: the place-items property</a> <a href="#ref-for-propdef-justify-items⑨">(2)</a> <a href="#ref-for-propdef-justify-items①⓪">(3)</a>
    <li><a href="#ref-for-propdef-justify-items①①">11. 
Changes</a> <a href="#ref-for-propdef-justify-items①②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-justify-items-legacy">
   <b><a href="#valdef-justify-items-legacy">#valdef-justify-items-legacy</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-justify-items-legacy①">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
    <li><a href="#ref-for-valdef-justify-items-legacy②">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a>
    <li><a href="#ref-for-valdef-justify-items-legacy③">7.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-items property</a> <a href="#ref-for-valdef-justify-items-legacy④">(2)</a> <a href="#ref-for-valdef-justify-items-legacy⑤">(3)</a> <a href="#ref-for-valdef-justify-items-legacy⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-align-items">
   <b><a href="#propdef-align-items">#propdef-align-items</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-align-items">2. 
Overview of Alignment Properties</a>
    <li><a href="#ref-for-propdef-align-items①">4.1. 
Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a>
    <li><a href="#ref-for-propdef-align-items②">6.2. 
Block-Axis (or Cross-Axis) Alignment: the align-self property</a>
    <li><a href="#ref-for-propdef-align-items③">7. 
Default Alignment</a>
    <li><a href="#ref-for-propdef-align-items④">7.2. 
Block-Axis (or Cross-Axis) Alignment: the align-items property</a>
    <li><a href="#ref-for-propdef-align-items⑤">7.3. 
Self-Alignment Shorthand: the place-items property</a> <a href="#ref-for-propdef-align-items⑥">(2)</a> <a href="#ref-for-propdef-align-items⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-place-items">
   <b><a href="#propdef-place-items">#propdef-place-items</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-place-items">7. 
Default Alignment</a>
    <li><a href="#ref-for-propdef-place-items①">7.3. 
Self-Alignment Shorthand: the place-items property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-row-gap">
   <b><a href="#propdef-row-gap">#propdef-row-gap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-row-gap">8. 
Gaps Between Boxes</a>
    <li><a href="#ref-for-propdef-row-gap①">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-propdef-row-gap②">(2)</a> <a href="#ref-for-propdef-row-gap③">(3)</a> <a href="#ref-for-propdef-row-gap④">(4)</a> <a href="#ref-for-propdef-row-gap⑤">(5)</a>
    <li><a href="#ref-for-propdef-row-gap⑥">8.2. 
Gap Shorthand: the gap property</a> <a href="#ref-for-propdef-row-gap⑦">(2)</a> <a href="#ref-for-propdef-row-gap⑧">(3)</a>
    <li><a href="#ref-for-propdef-row-gap⑨">8.3. 
Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties</a> <a href="#ref-for-propdef-row-gap①⓪">(2)</a>
    <li><a href="#ref-for-propdef-row-gap①①">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-column-gap">
   <b><a href="#propdef-column-gap">#propdef-column-gap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-column-gap">8. 
Gaps Between Boxes</a>
    <li><a href="#ref-for-propdef-column-gap①">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-propdef-column-gap②">(2)</a> <a href="#ref-for-propdef-column-gap③">(3)</a> <a href="#ref-for-propdef-column-gap④">(4)</a> <a href="#ref-for-propdef-column-gap⑤">(5)</a>
    <li><a href="#ref-for-propdef-column-gap⑥">8.2. 
Gap Shorthand: the gap property</a> <a href="#ref-for-propdef-column-gap⑦">(2)</a> <a href="#ref-for-propdef-column-gap⑧">(3)</a>
    <li><a href="#ref-for-propdef-column-gap⑨">8.3. 
Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties</a> <a href="#ref-for-propdef-column-gap①⓪">(2)</a>
    <li><a href="#ref-for-propdef-column-gap①①">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="gutter">
   <b><a href="#gutter">#gutter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-gutter">5.1.4. Grid Containers</a>
    <li><a href="#ref-for-gutter①">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a> <a href="#ref-for-gutter②">(2)</a> <a href="#ref-for-gutter③">(3)</a>
    <li><a href="#ref-for-gutter④">8.3. 
Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-row-gap-normal">
   <b><a href="#valdef-row-gap-normal">#valdef-row-gap-normal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-row-gap-normal">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-gap">
   <b><a href="#propdef-gap">#propdef-gap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-gap">8. 
Gaps Between Boxes</a>
    <li><a href="#ref-for-propdef-gap①">8.1. 
Row and Column Gutters: the row-gap and column-gap properties</a>
    <li><a href="#ref-for-propdef-gap②">8.2. 
Gap Shorthand: the gap property</a> <a href="#ref-for-propdef-gap③">(2)</a> <a href="#ref-for-propdef-gap④">(3)</a>
    <li><a href="#ref-for-propdef-gap⑤">8.3. 
Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties</a>
    <li><a href="#ref-for-propdef-gap⑥">11. 
Changes</a> <a href="#ref-for-propdef-gap⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-grid-row-gap">
   <b><a href="#propdef-grid-row-gap">#propdef-grid-row-gap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-grid-row-gap">8.3. 
Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties</a>
    <li><a href="#ref-for-propdef-grid-row-gap①">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-grid-column-gap">
   <b><a href="#propdef-grid-column-gap">#propdef-grid-column-gap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-grid-column-gap">8.3. 
Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties</a>
    <li><a href="#ref-for-propdef-grid-column-gap①">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-grid-gap">
   <b><a href="#propdef-grid-gap">#propdef-grid-gap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-grid-gap">8.3. 
Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties</a>
    <li><a href="#ref-for-propdef-grid-gap①">11. 
Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="baseline-set">
   <b><a href="#baseline-set">#baseline-set</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-baseline-set">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-baseline-set①">(2)</a> <a href="#ref-for-baseline-set②">(3)</a> <a href="#ref-for-baseline-set③">(4)</a> <a href="#ref-for-baseline-set④">(5)</a> <a href="#ref-for-baseline-set⑤">(6)</a> <a href="#ref-for-baseline-set⑥">(7)</a> <a href="#ref-for-baseline-set⑦">(8)</a> <a href="#ref-for-baseline-set⑧">(9)</a> <a href="#ref-for-baseline-set⑨">(10)</a> <a href="#ref-for-baseline-set①⓪">(11)</a> <a href="#ref-for-baseline-set①①">(12)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="first-baseline-set">
   <b><a href="#first-baseline-set">#first-baseline-set</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-first-baseline-set">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-first-baseline-set①">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="last-baseline-set">
   <b><a href="#last-baseline-set">#last-baseline-set</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-last-baseline-set">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a>
    <li><a href="#ref-for-last-baseline-set①">6.1. 
Inline-Axis (or Main-Axis) Alignment: the justify-self property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="alignment-baseline">
   <b><a href="#alignment-baseline">#alignment-baseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-alignment-baseline">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-alignment-baseline①">(2)</a> <a href="#ref-for-alignment-baseline②">(3)</a>
    <li><a href="#ref-for-alignment-baseline③">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-alignment-baseline④">6.4. 
Baseline Self-Alignment</a>
    <li><a href="#ref-for-alignment-baseline⑤">9. 
Baseline Alignment Details</a>
    <li><a href="#ref-for-alignment-baseline⑥">9.1. 
Determining the Baselines of a Box</a>
    <li><a href="#ref-for-alignment-baseline⑦">9.3. 
Aligning Boxes by Baseline</a> <a href="#ref-for-alignment-baseline⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="generate-baselines">
   <b><a href="#generate-baselines">#generate-baselines</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-generate-baselines">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-generate-baselines①">(2)</a> <a href="#ref-for-generate-baselines②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="synthesize-baseline">
   <b><a href="#synthesize-baseline">#synthesize-baseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-synthesize-baseline">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-synthesize-baseline①">(2)</a> <a href="#ref-for-synthesize-baseline②">(3)</a> <a href="#ref-for-synthesize-baseline③">(4)</a> <a href="#ref-for-synthesize-baseline④">(5)</a> <a href="#ref-for-synthesize-baseline⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="baseline-sharing-group">
   <b><a href="#baseline-sharing-group">#baseline-sharing-group</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-baseline-sharing-group">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-baseline-sharing-group①">(2)</a> <a href="#ref-for-baseline-sharing-group②">(3)</a> <a href="#ref-for-baseline-sharing-group③">(4)</a>
    <li><a href="#ref-for-baseline-sharing-group④">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-baseline-sharing-group⑤">6.4. 
Baseline Self-Alignment</a>
    <li><a href="#ref-for-baseline-sharing-group⑥">9. 
Baseline Alignment Details</a>
    <li><a href="#ref-for-baseline-sharing-group⑦">9.2. 
Baseline Alignment Grouping</a> <a href="#ref-for-baseline-sharing-group⑧">(2)</a>
    <li><a href="#ref-for-baseline-sharing-group⑨">9.3. 
Aligning Boxes by Baseline</a> <a href="#ref-for-baseline-sharing-group①⓪">(2)</a> <a href="#ref-for-baseline-sharing-group①①">(3)</a> <a href="#ref-for-baseline-sharing-group①②">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="shared-alignment-context">
   <b><a href="#shared-alignment-context">#shared-alignment-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shared-alignment-context">4. 
Alignment Keywords</a>
    <li><a href="#ref-for-shared-alignment-context①">4.2. 
Baseline Alignment: the baseline keyword and first/last modifiers</a> <a href="#ref-for-shared-alignment-context②">(2)</a>
    <li><a href="#ref-for-shared-alignment-context③">5.4. 
Baseline Content-Alignment</a>
    <li><a href="#ref-for-shared-alignment-context④">6.4. 
Baseline Self-Alignment</a>
    <li><a href="#ref-for-shared-alignment-context⑤">9.1. 
Determining the Baselines of a Box</a> <a href="#ref-for-shared-alignment-context⑥">(2)</a> <a href="#ref-for-shared-alignment-context⑦">(3)</a> <a href="#ref-for-shared-alignment-context⑧">(4)</a>
    <li><a href="#ref-for-shared-alignment-context⑨">9.2. 
Baseline Alignment Grouping</a> <a href="#ref-for-shared-alignment-context①⓪">(2)</a> <a href="#ref-for-shared-alignment-context①①">(3)</a>
    <li><a href="#ref-for-shared-alignment-context①②">9.3. 
Aligning Boxes by Baseline</a> <a href="#ref-for-shared-alignment-context①③">(2)</a> <a href="#ref-for-shared-alignment-context①④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="compatible-baseline-alignment-preferences">
   <b><a href="#compatible-baseline-alignment-preferences">#compatible-baseline-alignment-preferences</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-compatible-baseline-alignment-preferences">9.2. 
Baseline Alignment Grouping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="static-position-rectangle">
   <b><a href="#static-position-rectangle">#static-position-rectangle</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-static-position-rectangle">6.1.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-static-position-rectangle①">(2)</a>
    <li><a href="#ref-for-static-position-rectangle②">6.2.2. Absolutely-Positioned Boxes</a> <a href="#ref-for-static-position-rectangle③">(2)</a>
    <li><a href="#ref-for-static-position-rectangle④">6.5. 
Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</a> <a href="#ref-for-static-position-rectangle⑤">(2)</a> <a href="#ref-for-static-position-rectangle⑥">(3)</a>
    <li><a href="#ref-for-static-position-rectangle⑦">10. 
Appendix A: Static Position Terminology</a> <a href="#ref-for-static-position-rectangle⑧">(2)</a> <a href="#ref-for-static-position-rectangle⑨">(3)</a> <a href="#ref-for-static-position-rectangle①⓪">(4)</a> <a href="#ref-for-static-position-rectangle①①">(5)</a> <a href="#ref-for-static-position-rectangle①②">(6)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>